JAVASCRIPT   19

jquery dbpas carousel

Guest on 28th June 2022 04:30:01 AM

  1. /*
  2.  *dbpasCarousel - another jquery carousel plugin!
  3.  *version 0.1
  4.  *copyright(c) dbpas llc
  5.  *dual licensed under mit and gpl
  6.  *
  7.  *
  8. */
  9.  
  10. //polyfill, object.create
  11. if (!Object.create) {
  12.   Object.create = (function(){
  13.                 function F(){}
  14.                 return function(o){
  15.                         if (arguments.length != 1) {
  16.                                 throw new Error('Object.create implementation only accepts one parameter.');
  17.                         }
  18.                         F.prototype = o;
  19.                         return new F()
  20.                 }
  21.         })();
  22. }
  23.  
  24. ;(function($, win, doc, undefined) {
  25.         'use strict';
  26.        
  27.         function destroy(elem) {
  28.                 var $data = $.data($(elem)[0], 'dbpasCarousel');                                //get jquery data to remove timer
  29.  
  30.                 if ($data) {
  31.                         clearInterval($data.timerHandle);                                       //remove timer
  32.                        
  33.                         $(elem).parent().parent().find('*').off('.dbpasCarousel');              //remove all events on descendants
  34.                        
  35.                         $(elem).unwrap().unwrap().siblings('[data-carousel-control]').remove(); //remove control structure around ul
  36.                         $(elem).find('.caption').remove();                                      //remove any image captions
  37.                         $(elem).removeAttr('style').children().removeAttr('style');             //remove inline styles
  38.                        
  39.                         $(elem).removeData('dbpasCarousel');                                    //remove jquery data
  40.                 }else{
  41.                         console.log('dbpasCarousel: unable to destroy selected element!');
  42.                 }
  43.         }
  44.        
  45.         var Carousel = {
  46.                 init: function(options, elem) {
  47.                         var self = this;
  48.                        
  49.                         self.elem = elem;
  50.                         self.$elem = $(elem);
  51.                        
  52.                         self.options = $.extend({}, $.fn.dbpasCarousel.options, options);
  53.                        
  54.                         self.timerHandle = null;
  55.                         self.$queue = $({});
  56.                        
  57.                         self.build(); //build control structure around ul
  58.                        
  59.                         self.$wrapper = self.$elem.parent();
  60.                         self.$controlLeft = self.$wrapper.siblings('[data-carousel-control="left"]');
  61.                         self.$controlRight =  self.$wrapper.siblings('[data-carousel-control="right"]');
  62.                         self.$li = self.$elem.find('li'),
  63.                        
  64.                         self.maxOuterWidth = 0;
  65.                         self.maxWidth = 0;
  66.                        
  67.                         self.$li.each(function() {
  68.                                 if ($(this).outerWidth() >= self.maxOuterWidth) {                                             //get max width to apply to all items for smooth movement
  69.                                         self.maxOuterWidth = $(this).outerWidth();
  70.                                         self.maxWidth = $(this).width();
  71.                                 }
  72.                                 if (self.options.imgCaption && $(this).find('img:first').attr('alt')) {                       //image caption enabled, assume first image alt is caption
  73.                                         $(this).append($('<p/>').addClass('caption').html($(this).find('img:first').attr('alt')));
  74.                                 }
  75.                         });
  76.                        
  77.                         self.$li.css({'width': (self.maxWidth) + 'px'});                                                //give all items uniform width for smooth movement
  78.                         self.$wrapper.css({'max-width': (self.maxOuterWidth * self.options.itemsVisible) + 'px'});      //adjust wrapper width to show X items
  79.                         self.$elem.css({'left': '-' + self.maxOuterWidth + 'px'});                                      //move list to the left of view by 1 item width
  80.                         self.$elem.find('li:first').before($(self.$elem.find('li:last')));                              //makes sure first item is showing
  81.                        
  82.                         self.events();
  83.                        
  84.                         self.complete();
  85.                 },
  86.                
  87.                 build: function() {
  88.                         var self = this;
  89.                        
  90.                         //wrap ul by 2 divs for formating and add navigation controls
  91.                         self.$elem.wrap($('<div />').attr('data-carousel-name', self.$elem.attr('id') || '')).wrap($('<div />').attr('data-carousel-control', 'wrapper'));
  92.                         self.$elem.parent().parent().prepend($('<div />').attr('data-carousel-control', 'left').html('&#9664;')).append($('<div />').attr('data-carousel-control', 'right').html('&#9654;'));
  93.                 },
  94.                
  95.                 navigation: function(direction) {
  96.                         var self = this;
  97.                        
  98.                         self.leftIndent = 0;
  99.                        
  100.                         if (direction == 'right') {
  101.                                 self.leftIndent = parseInt(self.$elem.css('left')) + self.maxOuterWidth;  //move list to the right of view by 1 item width
  102.                                 self.$queue.queue('dbpasCarouselMove', function(next) {                   //queue the moving of item to front of list to be dequeued in animation
  103.                                         self.$elem.find('li:first').before($(self.$elem.find('li:last')));
  104.                                         next();
  105.                                 });
  106.                         }else{
  107.                                 self.leftIndent = parseInt(self.$elem.css('left')) - self.maxOuterWidth;  //move list to the left of view by 1 item width
  108.                                 self.$queue.queue('dbpasCarouselMove', function(next) {                   //queue the moving of item to back of list to be dequeued in animation
  109.                                         self.$elem.find('li:last').after($(self.$elem.find('li:first')));
  110.                                         next();
  111.                                 });
  112.                         }
  113.                        
  114.                         self.$elem.not(':animated').animate(
  115.                                 {'left': self.leftIndent},
  116.                                 self.options.slideDelay,
  117.                                 function() {
  118.                                         self.$queue.dequeue('dbpasCarouselMove');                   //move item to front/back of list
  119.                                         self.$elem.css({'left': '-' + self.maxOuterWidth + 'px'});  //move list to the left/right of view by 1 item width
  120.                                 }
  121.                         );             
  122.                 },
  123.                
  124.                 timer: function(action) {
  125.                         var self = this;
  126.                        
  127.                         if (action == 'start') {
  128.                                 self.timerHandle = setInterval(function() {
  129.                                         self.navigation('left');                        //auto slide always goes left
  130.                                 }, self.options.autoDelay);
  131.                         }else{
  132.                                 clearInterval(self.timerHandle);
  133.                         }
  134.                 },
  135.                
  136.                 events: function() {
  137.                         var self = this, eventNS = '.dbpasCarousel',
  138.                                 pauseActionStart, pauseActionStop, controlAction;
  139.                        
  140.                         if ('ontouchstart' in doc.documentElement) {              //check for touch events
  141.                                 controlAction = 'touchstart' + eventNS;
  142.                                 pauseActionStart = 'touchstart' + eventNS;
  143.                                 pauseActionStop = 'touchend' + eventNS;
  144.                         }else{
  145.                                 controlAction = 'click' + eventNS;
  146.                                 pauseActionStart = 'mouseenter' + eventNS;
  147.                                 pauseActionStop = 'mouseleave' + eventNS;
  148.                                 $('body').addClass('no-touch');                   //add class to disable :hover
  149.                         }
  150.                        
  151.                         if (self.options.autoSlide) {
  152.                                 self.timer('start');
  153.                        
  154.                                 if (self.options.hoverPause) {
  155.                                         self.$wrapper.parent().on(pauseActionStart, function() {
  156.                                                 self.timer('stop');
  157.                                         });
  158.                                                
  159.                                         self.$wrapper.parent().on(pauseActionStop, function() {
  160.                                                 self.timer('start');
  161.                                         });
  162.                                 }
  163.                         }
  164.                        
  165.                         self.$controlLeft.on(controlAction, function() {
  166.                                 self.navigation('left');
  167.                         });
  168.                        
  169.                         self.$controlRight.on(controlAction, function() {
  170.                                 self.navigation('right');
  171.                         });
  172.                 },
  173.                
  174.                 complete: function() {
  175.                         var self = this;
  176.                        
  177.                         if (typeof self.options.onComplete === 'function') {
  178.                                 self.options.onComplete.apply(self.$elem);
  179.                         }
  180.                 }
  181.         };
  182.        
  183.         $.fn.dbpasCarousel = function(options) {
  184.                 return this.each(function() {
  185.                         if (this.tagName.toLowerCase() == 'ul') {  //must be ul to work
  186.                                 if (typeof options === 'string') {
  187.                                         switch(options.toLowerCase()) {
  188.                                                 case 'destroy':
  189.                                                         destroy(this);
  190.                                                         break;
  191.                                                 default:
  192.                                                         console.log('dbpasCarousel: "' + options + '" is an invalid method!');
  193.                                         }
  194.                                 }else{
  195.                                         var carousel = Object.create(Carousel);
  196.                                        
  197.                                         carousel.init(options, this);
  198.                                        
  199.                                         $.data(this, 'dbpasCarousel', carousel); //make data available for later use
  200.                                 }
  201.                         }else{
  202.                                 console.log('dbpasCarousel: selected element is not a "UL"!');
  203.                         }
  204.                 });
  205.         };
  206.        
  207.         $.fn.dbpasCarousel.options = {
  208.                 itemsVisible: 2,  //for smooth movement, leave at a minimum 2 items out of view
  209.                 slideDelay: 500,  //milliseconds
  210.                 autoSlide: 0,     //0-off 1-on
  211.                 autoDelay: 5000,  //milliseconds
  212.                 hoverPause: 1,    //0-off 1-on
  213.                 imgCaption: 1,    //0-off 1-on
  214.                 onComplete: null  //callback function
  215.         };
  216.  
  217. })(jQuery, window, document);

Raw Paste


Login or Register to edit or fork this paste. It's free.