Variables are being shared across instances

Variables are being shared across instances

Hi. I'm making a image slider plugin which is working fine with single instance but when I have multiple instances on the page, the variables are being shared across these instances. How do I sandbox them and keep the instances isolated? Here's the code:

  1. var slider = $('.slider').mySlider();

  1. ;(function ($) {
  2.   var defaults = {
  3.     auto: false,
  4.     delay: 4000,
  5.     controls: true,
  6.     controlsPosition: 'inside', //inside, outside, neighbors
  7.     prevHtml: '<i class="material-icons">chevron_left</i>',
  8.     nextHtml: '<i class="material-icons">chevron_right</i>',
  9.     width: 70,
  10.     transitionSpeed: 400,
  11.     backdrop: true,
  12.     perspective: false,
  13.     pauseOnHover: true,
  14.     keyboard: true,
  15.     onLoad: function() {},
  16.     onSlideEnd : function() {}
  17.   };

  19.   var mySliderInit = function (el, options) {
  20.     var settings = $.extend({}, defaults, options || {}),
  21.     el = $(el);
  22.     el.wrap('<div class="mySlider-outerwrapper"><div class="mySlider-wrapper"></div></div>');

  24.     var outerWrapper = el.closest('.mySlider-outerwrapper'),
  25.     wrapper = el.closest('.mySlider-wrapper');

  27.     var numSlides = el.find('li').length,
  28.     numElements = numSlides+4,
  29.     wrapperWidth = wrapper.width(),
  30.     slideWidth = wrapperWidth*(settings.width)/100,
  31.     sideWidth = wrapperWidth*((100 - settings.width)/2)/100;

  33.     var first_slide = el.find("li").slice(0,2),
  34.     last_slide = el.find("li").slice(-2);
  35.     el.prepend(last_slide.clone().addClass('mySlider-clone'));
  36.     el.append(first_slide.clone().addClass('mySlider-clone'));
  37.     el.width(numElements*slideWidth);
  38.     var slides = el.find('li');
  39.     slides.width(slideWidth);

  41.     //first move
  42.     var index = 0;
  43.     var slideMovement = wrapperWidth*settings.width/100;
  44.     var firstMovement = currentPosition = -(slideWidth-sideWidth+slideWidth);
  45.     el.css('transform', 'translateX('+(firstMovement)+'px)');

  47.     if(settings.controls){
  48.       outerWrapper.append('<a href="#" class="mySlider-nav mySlider-prev">'+settings.prevHtml+'</a>');
  49.       outerWrapper.append('<a href="#" class="mySlider-nav mySlider-next">'+settings.nextHtml+'</a>');
  50.     }

  52.     function moveSlider(direction){
  53.       if(direction == 'forward'){
  54.         index++;
  55.         currentPosition -= slideWidth;
  56.       } else if(direction == 'backward'){
  57.         index--;
  58.         currentPosition += slideWidth;
  59.       }
  60.       $(slides[index+2]).addClass('active').siblings().removeClass('active');
  61.       el.css('transform', 'translateX('+currentPosition+'px)');
  62.       setTimeout(function() {
  63.         if(index > numSlides-1){
  64.           index = 0;
  65.           currentPosition = firstMovement;
  66.           var loop = true;
  67.         } else if(index < 0){
  68.           index = numSlides-1;
  69.           currentPosition -= numSlides*slideWidth;
  70.           var loop = true
  71.         } else {
  72.           var loop = false;
  73.         }
  74.         if(loop){
  75.           slides.css('transition-duration', '0ms');
  76.           $(slides[index+2]).addClass('active');
  77.           el.css({
  78.             'transition-duration': '0ms',
  79.             'transform': 'translateX('+currentPosition+'px)'
  80.           });
  81.           setTimeout(function() {
  82.             el.css('transition-duration', settings.transitionSpeed+'ms');
  83.             slides.css('transition-duration', settings.transitionSpeed+'ms');
  84.           }, 20);
  85.         }

  87.         settings.onSlideEnd.call(el);
  88.       }, settings.transitionSpeed);
  89.     }

  91.     outerWrapper.on('click', '.mySlider-next', function(e){
  92.       e.preventDefault();
  93.       moveSlider('forward');
  94.     });

  96.     outerWrapper.on('click', '.mySlider-prev', function(e){
  97.       e.preventDefault();
  98.       moveSlider('backward');
  99.     });

  101.     return this;
  102.   };

  104.   $.fn.mySlider = function (settings){
  105.     return this.each(function(){
  106.       new mySliderInit($(this), settings);
  107.     });
  108.   }

  110. }(jQuery));
Sorry about the long code but I believe the issue is somewhere in the organization of code itself.
Thanks