Light Weight JavaScript CSS3 Animation Slideshow

Show Hide Light Weight JavaScript Slideshow Code

var slideShow = ( function () {
'use strict';
var slideShow = {
    slides       : {}
,   pauseBtn     : {}
,   nextBtn      : {}
,   previousBtn  : {}
,   slideDelay   : 0
,   currentSlide : 0
,   slideInterval: 0
,   slidesLength : 0
,   playing      : 0
,   init: function ( options ) {
        /* Setup variables */
        this.slideShowId = options.slideShowId || "slides";
        this.slideDelay  = options.delay || 3000;
        this.slides       = document.querySelectorAll( "#" +
            this.slideShowId + " .slide" );
        this.slideTypesUl = document.querySelector( "#" + this.slideShowId +
            " .slides");
        this.pauseBtn     = document.getElementById( 'pause' );
        this.nextBtn      = document.getElementById( 'next' );
        this.previousBtn  = document.getElementById( 'previous' );
        this.slideType    = this.slideTypesUl.className;
        this.currentSlide  = 0;
        this.slideInterval = setInterval( this.nextSlide.bind( this ), this.slideDelay );
        this.slidesLength  = this.slides.length;
        this.playing       = true;

        // Assign slide type to slide container class
        // initiating slide type animation
        this.slideTypesUl.className = this.slideType;

        /* button event functions */
        this.pauseBtn.onclick = function () {
            this.playing ? this.pauseSlideshow() : this.playSlideshow();
        }.bind( this );

        this.nextBtn.onclick = function () {
            this.pauseSlideshow();
            this.nextSlide();
        }.bind( this );
        
        this.previousBtn.onclick = function () {
            this.pauseSlideshow();
            this.previousSlide();
        }.bind( this );
        return this;
    }
,   goToSlide: function ( n ) {
        this.slides[this.currentSlide].className = 'slide';
        this.currentSlide = ( this.slidesLength + n ) % this.slidesLength;
        this.slides[this.currentSlide].className = 'slide active';
    }
,   nextSlide: function () {
        this.goToSlide( this.currentSlide + 1 );
    }
,   previousSlide: function () {
        this.goToSlide( this.currentSlide - 1 );
    }
,   pauseSlideshow: function () {
        // Set controls container class to change button styles
        document.getElementById( 'slideshow-controls' ).className = 'pauseSlide';
        if ( this.playing ) {
            this.slideTypesUl.setAttribute( "data-slideshowtype", this.slideTypesUl.className );
        }
        this.slideTypesUl.className = "slides opacity";
        this.playing = false;
        this.pauseBtn.innerHTML = 'Play';
        clearInterval( this.slideInterval );
    }
,   playSlideshow () {
        // Clear controls container class to reset button styles
        document.getElementById( 'slideshow-controls' ).className = '';
        this.slideType = this.slideTypesUl.getAttribute( "data-slideshowtype" );
        this.slideTypesUl.className = this.slideType;
        this.pauseBtn.innerHTML = 'Pause';
        this.playing = true;
        this.slideInterval = setInterval( this.nextSlide.bind( this ), this.slideDelay );
    }
}
return slideShow;
} )();