BTEC IT Unit 20 - Website Design/JavaScript/Slideshow

Add a slideshow

HTML Code

<div class="slider" id="main-slider">
     <div class="slider-wrapper">
          <img src="http://lorempixel.com/1024/400/animals" alt="First" class="slide" >
          <img src="http://lorempixel.com/1024/400/business" alt="Second" class="slide" >
          <img src="http://lorempixel.com/1024/400/city" alt="Third" class="slide" >
     </div>
</div>
</SOURCE>


CSS Code

<syntaxhighlight lang="CSS">
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: 50%;
                height: 90%;
                opacity: 0;
                transition: opacity 3s linear;
}
 
.slider-wrapper > .slide:first-child {
                opacity: 1;
}

JavaScript Code

<script>
 
                (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" );
                               
                });
               
               
})();
 
</script>