Guest User

MJ Carousel

a guest
Oct 9th, 2015
149
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.     Author      : Michael Janea
  3.     Version     : 1.0.1
  4.     Author URL  : www.michaeljanea.byethost7.com
  5. */
  6.  
  7. (function($){
  8.    
  9.     //define plugin
  10.     $.fn.mjCarousel = function(options){
  11.        
  12.         //defaults
  13.         var defaults = {
  14.             transition  : 400,
  15.             delay       : 3000
  16.         };
  17.        
  18.         //extends
  19.         var settings = $.extend({}, defaults, options);
  20.        
  21.         //variables
  22.         var nextSlide, playing = navigationClicked = false;
  23.        
  24.         //function
  25.         return this.each(function(){
  26.            
  27.             //element var
  28.             el = $(this);
  29.            
  30.             //set next slide
  31.             nextSlide = $(el).find('.mj_carousel_image.active').index() + 2;
  32.            
  33.             //auto play
  34.             /*setTimeout(function(){
  35.                 autoPlay(el);
  36.             }, settings.delay);*/
  37.             eval("mjCarousel_loop_" + $(el).index() + " = setTimeout(function(){autoPlay(el);}, settings.delay);");
  38.            
  39.             //auto play function
  40.             function autoPlay(el){
  41.                
  42.                 //trigger next button
  43.                 $(el).find('.mj_carousel_next').trigger('click');
  44.                
  45.                 //play again
  46.                 eval("mjCarousel_loop_" + $(el).index() + " = setTimeout(function(){autoPlay(el);}, settings.delay);");
  47.                
  48.             };
  49.            
  50.             //on next click
  51.             $(this).find('.mj_carousel_next').on('click', function(){
  52.                
  53.                 //do the action if not carousel in not playing
  54.                 if(!playing){
  55.                    
  56.                     //set carousel as playing
  57.                     playing = true;
  58.                    
  59.                     //disable auto play
  60.                     eval("clearTimeout(mjCarousel_loop_" + $(this).closest('.mj_carousel').index() + ")");
  61.                    
  62.                     //next slide
  63.                     if(!navigationClicked){
  64.                         nextSlide = $(this).closest('.mj_carousel').find('.mj_carousel_image.active').index() + 2;
  65.                     }
  66.                     nextSlide = nextSlide > $(this).closest('.mj_carousel').find('.mj_carousel_image').size() ? 1 : nextSlide;
  67.                    
  68.                     //top position
  69.                     topPosition = nextSlide == 1 ? 0 : '-' + $(this).closest('.mj_carousel').outerHeight();
  70.                    
  71.                     //change active navigation
  72.                     $(this).closest('.mj_carousel').find('.mj_carousel_navigation').find('li').removeClass('active').siblings(':nth-child(' + nextSlide + ')').addClass('active');
  73.                    
  74.                     //position the next slide and animate to show it
  75.                     $(this).closest('.mj_carousel').find('.mj_carousel_image.active').siblings(':nth-child(' + nextSlide + ')').css({display:'block', left:$(this).closest('.mj_carousel').outerWidth()}).animate({top:topPosition, marginBottom:'-' + $(this).closest('.mj_carousel').outerHeight()}, 0).stop(true, true).animate({top:topPosition, left:'-=' + $(this).closest('.mj_carousel').outerWidth()}, settings.transition, function(){
  76.                        
  77.                         //remove inline css generated by jquery and set as active
  78.                         $(this).addClass('active').removeAttr('style');
  79.                        
  80.                         //tell the carousel that navigation wasn't clicked
  81.                         navigationClicked = false;
  82.                        
  83.                         //next slide increment
  84.                         nextSlide++;
  85.                        
  86.                         //set carousel as done playing
  87.                         playing = false;
  88.  
  89.                         //temporary carousel variable
  90.                         var elTmp = $(this).closest('.mj_carousel');
  91.                        
  92.                         //enable auto play
  93.                         /*mjCarousel_loop_ = setTimeout(function(){
  94.                             autoPlay(elTmp);
  95.                         }, settings.delay);*/
  96.                         eval("mjCarousel_loop_" + $(elTmp).index() + " = setTimeout(function(){autoPlay(elTmp);}, settings.delay);");
  97.                        
  98.                     });
  99.                    
  100.                     //position the current active slide to hide
  101.                     $(this).closest('.mj_carousel').find('.mj_carousel_image.active').stop(true, true).animate({left:'-=' + $(this).closest('.mj_carousel').outerWidth()}, settings.transition, function(){
  102.                        
  103.                         //remove inline css generated by jquery and remove its class active
  104.                         $(this).removeAttr('style').removeClass('active');
  105.                        
  106.                     });
  107.                
  108.                 }
  109.                
  110.             });
  111.            
  112.             //on previous click
  113.             $(this).find('.mj_carousel_prev').on('click', function(){
  114.                
  115.                 //do the action if not carousel in not playing
  116.                 if(!playing){
  117.                    
  118.                     //set carousel as playing
  119.                     playing = true;
  120.                    
  121.                     //disable auto play
  122.                     eval("clearTimeout(mjCarousel_loop_" + $(this).closest('.mj_carousel').index() + ")");
  123.                    
  124.                     //prev slide
  125.                     if(!navigationClicked){
  126.                         prevSlide = $(this).closest('.mj_carousel').find('.mj_carousel_image.active').index();
  127.                     }
  128.                     prevSlide = prevSlide == 0 ? $(this).closest('.mj_carousel').find('.mj_carousel_image').size() : prevSlide;
  129.                    
  130.                     //top position
  131.                     topPosition = prevSlide < $(this).closest('.mj_carousel').find('.mj_carousel_image').size() ? 0 : '-' + $(this).closest('.mj_carousel').outerHeight();
  132.                    
  133.                     //change active navigation
  134.                     $(this).closest('.mj_carousel').find('.mj_carousel_navigation').find('li').removeClass('active').siblings(':nth-child(' + prevSlide + ')').addClass('active');
  135.                    
  136.                     //position the prev slide and animate to show it
  137.                     $(this).closest('.mj_carousel').find('.mj_carousel_image.active').siblings(':nth-child(' + prevSlide + ')').css({display:'block'}).animate({top:topPosition, marginBottom:'-' + $(this).closest('.mj_carousel').outerHeight(), left:'-' + $(this).closest('.mj_carousel').outerWidth()}, 0).stop(true, true).animate({left:'+=' + $(this).closest('.mj_carousel').outerWidth()}, settings.transition, function(){
  138.                        
  139.                         //remove inline css generated by jquery and set as active
  140.                         $(this).addClass('active').removeAttr('style');
  141.                        
  142.                         //tell the carousel that navigation wasn't clicked
  143.                         navigationClicked = false;
  144.                        
  145.                         //prev slide decrement
  146.                         prevSlide--;
  147.                        
  148.                         //set carousel as done playing
  149.                         playing = false;
  150.                        
  151.                         //temporary carousel variable
  152.                         var elTmp = $(this).closest('.mj_carousel');
  153.                        
  154.                         //enable auto play
  155.                         /*mjCarousel_loop_ = setTimeout(function(){
  156.                             autoPlay(elTmp);
  157.                         }, settings.delay);*/
  158.                         eval("mjCarousel_loop_" + $(elTmp).index() + " = setTimeout(function(){autoPlay(elTmp);}, settings.delay);");
  159.                        
  160.                     });
  161.                    
  162.                     //position the current active slide to hide
  163.                     $(this).closest('.mj_carousel').find('.mj_carousel_image.active').stop(true, true).animate({left:'+=' + $(this).closest('.mj_carousel').outerWidth()}, settings.transition, function(){
  164.                        
  165.                         //remove inline css generated by jquery and remove its class active
  166.                         $(this).removeAttr('style').removeClass('active');
  167.                        
  168.                     });
  169.                
  170.                 }
  171.                
  172.             });
  173.            
  174.             //navigations
  175.             $(this).find('.mj_carousel_navigation').find('li').on('click', function(){
  176.                
  177.                     //disable auto play
  178.                     eval("clearTimeout(mjCarousel_loop_" + $(this).closest('.mj_carousel').index() + ")");
  179.                    
  180.                     //tell the carousel that navigation was clicked
  181.                     navigationClicked = true;
  182.  
  183.                     //if next slide is greater than the current slide
  184.                     if($(this).attr('data-slide') >= nextSlide){
  185.                    
  186.                         //set next slide
  187.                         nextSlide = $(this).attr('data-slide');
  188.                    
  189.                         //trigger next button
  190.                         $(this).closest('.mj_carousel').find('.mj_carousel_next').trigger('click');
  191.  
  192.                     //if next slide is less than the current slide
  193.                     }else if($(this).attr('data-slide') < nextSlide){
  194.                        
  195.                         //set prev slide
  196.                         prevSlide = $(this).attr('data-slide');
  197.                        
  198.                         //trigger prev button
  199.                         $(this).closest('.mj_carousel').find('.mj_carousel_prev').trigger('click');
  200.                        
  201.                     }
  202.                
  203.             });
  204.            
  205.         });
  206.        
  207.     };
  208.    
  209. })(jQuery);
RAW Paste Data