/* version 2.3.4 the mit license (mit) simple jquery slider is just what is says it is: a simple but powerfull jquery slider. copyright (c) 2014 dirk groenen - bitlabs development permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "software"), to deal in the software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software, and to permit persons to whom the software is furnished to do so, subject to the following conditions: */ /* citymedia */ (function($){ var simpleslider = function(element, useroptions){ // set some variables var obj = this, sliderinterval = null; obj.currentslide = 0; obj.totalslides = 0; // extend default options with user options useroptions = (useroptions === undefined) ? {} : useroptions; var options = $.extend({ slidescontainer: element, slides: '.slide', slidetracker: true, slidetrackerid: 'slideposition', slideoninterval: true, interval: 5000, swipe: true, autoslide:true, animateduration: 1000, animationeasing: 'ease', pauseonhover: false, updatetransit: true, // change this to false is you dont want the slider to update the transit usetransitionend to true neverending: true // create a 'neverending/repeating' slider effect. }, useroptions); // init the slider obj.init = function(){ // if transit is included and usetransitionend == false we will change this to true (better animation performance). // unless the user changed updatetransit to false if(options.updatetransit && $.support.transition && jquery().transition && !$.transit.usetransitionend){ $.transit.usetransitionend = true; } // find the slides in the sliderdom and add the index attribute $(options.slidescontainer).find(options.slides).each(function(index){ // give each slide a data-index so we can control it later on $(this).attr('data-index', index); // a fixed width is needed for the ie left animation. here we give each slide a width if ($.support.transition && jquery().transition){ $(this).css({ x: index*100+'%', width: $(this).outerwidth() }); } else{ $(this).css({ left: index*100+'%', width: $(this).outerwidth() }); } }); // count the total slides obj.totalslides = $(options.slidescontainer).find(options.slides).length; // place the slidetracker after the container if enabled in the options if(options.slidetracker){ // add the slideposition div and add the indicators $(options.slidescontainer).after("
"); for(var x = 0; x < obj.totalslides;x++){ $('#'+ options.slidetrackerid +' ul').append('
  • '); } $('#'+ options.slidetrackerid +' ul li[data-index="'+obj.currentslide+'"]').addclass('active'); // make the slide indicators clickable $("#"+ options.slidetrackerid +" ul li").click(function(){ if(!($(this).hasclass("active"))) obj.nextslide($(this).data('index')); }); } // start the slider interval if enabled in options if(options.slideoninterval){ setsliderinterval(); } // change the cursor with a grabbing hand that simulates the swiping on desktops if(options.swipe && jquery().swipe){ $(options.slidescontainer).css('cursor','-webkit-grab'); $(options.slidescontainer).css('cursor','-moz-grab'); $(options.slidescontainer).css('cursor','grab'); $(options.slidescontainer).mousedown(function(){ $(options.slidescontainer).css('cursor','-webkit-grabbing'); $(options.slidescontainer).css('cursor','-moz-grabbing'); $(options.slidescontainer).css('cursor','grabbing'); }); $(options.slidescontainer).mouseup(function(){ $(options.slidescontainer).css('cursor','-webkit-grab'); $(options.slidescontainer).css('cursor','-moz-grab'); $(options.slidescontainer).css('cursor','grab'); }); // add the swipe actions to the container $(options.slidescontainer).swipe({ swipeleft: function(){ obj.nextslide(); }, swiperight: function(){ obj.prevslide(); } }); } else if(!jquery().swipe && options.swipe === true){ console.warn("duo the missing touchswipe.js swipe has been disabled."); } }(); // bind the function that recalculates the width of each slide on a resize. $(window).resize(function(){ $(options.slidescontainer).find(options.slides).each(function(index){ // reset width; otherwise it will keep the same width as before $(this).css('width',''); $(this).css({x: index*100+'%',width: $(this).outerwidth()}); }); }); // controller of the interval function setsliderinterval(){ clearinterval(sliderinterval); sliderinterval = setinterval(function(){ obj.nextslide(); },options.interval); }; // go to a previous slide (calls the nextslide function with the new slide number obj.prevslide = function(){ var slide = (obj.currentslide > 0) ? obj.currentslide -= 1 : (obj.totalslides - 1); obj.nextslide(slide); }; // go to a next slide (function is also used for the previous slide and goto slide functions). // if a paramater is given it will go to the given slide obj.nextslide = function(slide){ // cache the previous slide number and set slided to false var prevslide = obj.currentslide, slided = false; if(slide === undefined) obj.currentslide = (obj.currentslide < (obj.totalslides-1)) ? obj.currentslide += 1 : 0 ; else obj.currentslide = slide; // create trigger point before a slide slides. trigger wil return the prev and coming slide number $(element).trigger({ type: "beforesliding", prevslide: prevslide, newslide: obj.currentslide }); // slide animation, here we determine if we can use css transitions (transit.js) or have to use jquery animate $(options.slidescontainer).find(options.slides).each(function(index){ if ($.support.transition && jquery().transition) $(this).stop().transition({x: ($(this).data('index')-obj.currentslide)*100+'%'}, options.animateduration, options.animationeasing); else $(this).stop().animate({left: ($(this).data('index')-obj.currentslide)*100+'%'}, options.animateduration, triggerslideend); }); // somehow the callback from $.transition doesn't work, so we create ow custom bind here $(options.slidescontainer).on('otransitionend webkittransitionend otransitionend otransitionend transitionend', triggerslideend); // create trigger point after a slide slides. all the slides return a transitionend; to prevent a repeating trigger we keep a slided var function triggerslideend(){ if(!slided){ $(element).trigger({ type: "aftersliding", prevslide: prevslide, newslide: obj.currentslide }); slided = true; } } // show current slide bulb $('#'+ options.slidetrackerid +' ul li').removeclass('active'); $('#'+ options.slidetrackerid +' ul li[data-index="'+obj.currentslide+'"]').addclass('active'); // (re)set the slider interval if(options.slideoninterval){ setsliderinterval(); } }; // function for the pauseonhover. //the function will clear the interval and restart it after the mouse disappears from the container if(options.pauseonhover){ $(options.slidescontainer).hover(function(){ clearinterval(sliderinterval); }, function(){ setsliderinterval(); }); } }; // create a plugin $.fn.simpleslider = function(options){ return this.each(function(){ var element = $(this); // return early if this element already has a plugin instance if (element.data('simpleslider')) return; // pass options and element to the plugin constructer var simpleslider = new simpleslider(this, options); // store the plugin object in this element's data element.data('simpleslider', simpleslider); }); } })(jquery);