Javascript Image Slider - Need to add buttons

Question

Please see my code below. This code works fine but i want to add pause/resume,forward,backward buttons. So if someone click on pause, it will stop auto rotation. I can't use Jquery. I worked on this code but i am not able to add buttons to this code.

 (function() { function Slideshow( element ) { this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); this.previous = this.el.querySelector( ".slider-previous" ); this.next = this.el.querySelector( ".slider-next" ); this.index = 0; this.total = this.slides.length; this.timer = null; this.action(); this.stopStart(); }, _slideTo: function( slide ) { var currentSlide = this.slides[slide]; currentSlide.style.opacity = 1; for( var i = 0; i < this.slides.length; i++ ) { var slide = this.slides[i]; if( slide !== currentSlide ) { slide.style.opacity = 0; } } }, action: function() { var self = this; self.timer = setInterval(function() { self.index++; if( self.index == self.slides.length ) { self.index = 0; } self._slideTo( self.index ); }, 3000); }, stopStart: function() { var self = this; self.el.addEventListener( "mouseover", function() { clearInterval( self.timer ); self.timer = null; }, false); self.el.addEventListener( "mouseout", function() { self.action(); }, false); } }; document.addEventListener( "DOMContentLoaded", function() { var slider = new Slideshow( "#main-slider" ); }); })(); 

 html,body { margin: 0; padding: 0; } .slider { width: 1024px; margin: 2em auto; } .slider-wrapper { width: 100%; height: 400px; position: relative; } .slide { float: left; position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 3s linear; } .slider-wrapper > .slide:first-child { opacity: 1; } 

 <div class="slider" id="main-slider"><!-- outermost container element --> <div class="slider-wrapper"><!-- innermost wrapper element --> <img id="image1" src="SupplyImages/WF00/1489007864182_35556.jpg" alt="First" class="slide" /><!-- slides --> <img id="image2" src="SupplyImages/WF00/1489008043581_741956.jpg" alt="Second" class="slide" /> <img id="image3" src="SupplyImages/WF00/1489008288715_503637.png" alt="Third" class="slide" /> </div> </div> 

Answer 1

This can be done this way.

 (function() { function Slideshow( element ) { this.el = document.querySelector( element ); this.init(); } Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); this.index = 0; this.total = this.slides.length; this.timer = null; this.nextButton = document.querySelector('#next'); this.previousButton = document.querySelector('#previous'); this.toggleButton = document.querySelector('#toggle'); this.action(); this.stopStart(); this.toggleButton.addEventListener('click', function(e){ e.preventDefault(); this.stop(); }.bind(this)); this.nextButton.addEventListener('click', function(e){ e.preventDefault(); this.next(); }.bind(this)); this.previousButton.addEventListener('click', function(e){ e.preventDefault(); this.previous(); }.bind(this)) }, _slideTo: function( slide ) { var currentSlide = this.slides[slide]; currentSlide.style.opacity = 1; for( var i = 0; i < this.slides.length; i++ ) { slide = this.slides[i]; if( slide !== currentSlide ) { slide.style.opacity = 0; } } }, action: function() { var self = this; this.timer = setInterval(function() { self.index++; if( self.index == self.slides.length ) { self.index = 0; } self._slideTo( self.index ); }, 5000); }, stopStart: function() { var self = this; self.el.addEventListener( "mouseover", function(){ clearInterval( self.timer ); self.timer = null; }, false); self.el.addEventListener( "mouseout", function() { self.action(); }, false); }, stop: function(){ if(this.timer){ clearInterval( this.timer ); this.timer = null; this.toggleButton.innerText = 'Play'; }else{ this.action(); this.toggleButton.innerText = 'Pause'; } }, next: function(){ this.index++; if( this.index === this.slides.length ) { this.index = 0; } this._slideTo(this.index); }, previous: function(){ this.index--; if( this.index <= 0 ) { this.index = this.slides.length - 1; } this._slideTo(this.index); } }; document.addEventListener( "DOMContentLoaded", function() { var slider = new Slideshow( "#main-slider" ); }); })(); 

  html,body { margin: 0; padding: 0; } .slider { width: 1024px; margin: 2em auto; } .slider-wrapper { width: 100%; height: 350px; position: relative; } .slide { float: left; position: absolute; opacity: 0; transition: opacity 1s linear; } .slider-wrapper > .slide:first-child { opacity: 1; } 

 <!DOCTYPE html> <html> <body> <div class="slider" id="main-slider"><!-- outermost container element --> <div class="slider-wrapper"><!-- innermost wrapper element --> <img id="image1" src="http://placehold.it/350x250?text=1" alt="First" class="slide" /><!-- slides --> <img id="image2" src="http://placehold.it/350x250?text=2" alt="Second" class="slide" /> <img id="image3" src="http://placehold.it/350x250?text=3" alt="Third" class="slide" /> </div> </div> <div class="buttonBlock"> <button id="toggle">Pause</button> <button id="next">Next</button> <button id="previous">Previous</button> </div> </body> </html> 

There are other ways to do it, this seemed like a good approach based on your current codebase. Hope this helps.