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