With front-end, working with slideshows is a common practice, there are many types of slides as well as a lot of support plugins.
But sometimes for some reason or you want to create your own slideshow to customize as you like.
Today I would like to share how to create a basic slide with Javascript
Hope it will help you !!!
Let’s go.
First, I will create the HTML structure of the slide as follows:
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="slide" id="slider"> <ul id="slide__content" class="slide__content"> <li><img src="./images/banner1.jpg" class="slide__content-item resimg" alt="banner images"></li> <li><img src="./images/banner2.jpg" class="slide__content-item resimg" alt="banner images"></li> <li><img src="./images/banner3.jpg" class="slide__content-item resimg" alt="banner images"></li> </ul> <div class="slide__arrow"> <a class="slide__arrow-arNext">arNext</a> <a class="slide__arrow-arPrev">arPrev</a> </div> <ul class="slide__nav"></ul> </div> |
Here you see that both the class and id are the same, you don’t need to care simply because I just want to style css with class.
Next in the file * .js we create a class that includes the necessary input parameters as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | class Slider { constructor(){ this.slide = document.getElementById('slider'); this.slideContent = document.getElementById('slide__content'); this.item = this.slideContent.getElementsByTagName('li'); this.navItem = document.querySelectorAll('.slide__nav li'); this.arNext = document.querySelector('.slide__arrow-arNext'); this.arPrev = document.querySelector('.slide__arrow-arPrev'); this.navSlider = document.querySelector('.slide__nav'); this.heightItem = this.slideContent.querySelector('.slide__content-item').clientHeight; this.autoPlay = true; this.duaEffect = 900; this.duaration = 5000; this.current = 0; this.prev = 0; this.timer; if(!this.slide) return; this.init(); } } |
Here we have: items of slides, nav slides, button next / prev slides, autoplay slides, and can change the time of effects (duaEffect) as well as the timeout of a slide (duaration).
Now we will write the functions to be able to execute a complete slide:
1 2 3 4 5 6 7 8 9 10 11 12 13 | init() { let self = this; window.addEventListener('load', function(){self.Start()}, false); } Start() { let s = this; this.Nav(); this.Arrow(); this.item[this.current].classList.add("current"); this.slideContent.style.height = this.heightItem + 'px'; this.autoPlay ? this.timer = setTimeout(function() {s.getCurrent()}, this.duaration) : ''; } |
Create and set height for slides
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | Next() { this.prev = this.current; clearTimeout(this.timer); this.current++; this.current >= this.item.length ? this.current = 0 : ''; this.nextSlider(); } Prev() { this.prev = this.current; clearTimeout(this.timer); this.current--; this.current < 0 ? this.current = this.item.length - 1 : ''; this.nextSlider(); } getCurrent() { this.prev = this.current; this.current++; this.current >= this.item.length ? this.current = 0 : ''; this.nextSlider(); } |
Next / Prev slides based on slide current.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | nextSlider() { let a = this; //remove all class for(let i = 0;i < this.item.length; i++){ this.item[i].classList.remove("prev"); this.item[i].classList.remove("current"); this.navItem[i].classList.remove("prev"); } //add class for slide item and nav item this.item[this.current].classList.add("current"); this.item[this.prev].classList.add("prev"); this.navItem[this.current].classList.add('active'); this.navItem[this.prev].classList.remove('active'); // start effect to slide this.item[this.current].style.opacity = '0'; Velocity( this.item[this.current] ,{opacity: 1}, {duration: this.duaEffect, delay:0, queue:false, easing:'linear'}); // autoplay slide this.autoPlay ? this.timer = setTimeout(function() { a.getCurrent() }, this.duaration) : ''; } |
The handle when changing slides, here I use Velocity.js is an interesting javascript library for creating motion effects like Fade, Slide, Scroll, Stop, Finish and Reverse …
More reference here: GitHub: https://github.com/julianshapiro/velocity
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | Nav() { let n = this; // create nav item for(let j = 0; j < this.item.length; j++) { this.navItem = document.createElement('li'); this.navItem.textContent = j; this.navSlider.appendChild(this.navItem); } // handle nav item this.navItem = this.navSlider.getElementsByTagName('li'); n.navItem[this.current].classList.add('active'); for(let i = 0; i<this.navItem.length; i++) { this.navItem[i].addEventListener("click", function(e){ const posnav = Array.prototype.indexOf.call(n.navItem, e.currentTarget); if(!n.navItem[posnav].classList.contains("active")) { this.classList.add('active'); n.prev = n.current; n.current = posnav; clearTimeout(n.timer); n.nextSlider(); } }); } } Arrow() { let r = this; this.arNext.addEventListener('click', function(){r.Next()}, false); this.arPrev.addEventListener('click', function(){r.Prev();}, false); } |
Next is to handle the Nav Slide section and click the slide’s Next / Prev button.
Here I have finished the js section for the slide and just call the Slide class to execute:
1 2 3 | window.addEventListener('DOMContentLoaded', function() { new Slider(); }); |
Finally, the css for the slide and its components is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | .slide { position: relative; &__content { position: relative; z-index: 8; overflow: hidden; width: 100%; li { height: 100%; width: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 7; >img { width: 100%; height: 100%; } } li.current { z-index: 9; } li.prev { z-index: 8; } } &__nav { position: absolute; bottom: 30px; right: 0; left: 0; z-index: 99; margin: 0 auto; text-align: center; li { display: inline-block; font-size: 0; border-radius: 50px; background: #c5acac; width: 12px; height: 12px; text-indent: -99999px; margin: 0 12px; cursor: pointer; &.active { background: #ba2b1b; } } } &__arrow { a { position: absolute; top: 50%; width: 38px; height: 38px; transform: translateY(-50%); background: #d5d5d5; z-index: 9; cursor: pointer; overflow: hidden; text-indent: -999px; &::before { float: left; width: 38px; height: 38px; color: #000; font-size: 16px; position: relative; z-index: 9; text-indent: 0; text-align: center; line-height: 34px; } } &-arPrev { left: 30px; &::before { content: '<'; } } &-arNext { right: 30px; &::before { content: '>'; } } } } |
So we have a basic slideshow to use, you can customize it further according to your requirements
can see more results here (Velocity runs on this a bit imprisoned: d) https://codepen.io/yes_no8x/pen/KGerEP
Thank you for your interest!