Search jQuery

jQuery Forum

Variables are being shared across instances

in Developing jQuery Plugins • 3 years ago

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:

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

;(function ($) {
var defaults = {
auto: false,
delay: 4000,
controls: true,
controlsPosition: 'inside', //inside, outside, neighbors
prevHtml: '<i class="material-icons">chevron_left</i>',
nextHtml: '<i class="material-icons">chevron_right</i>',
width: 70,
transitionSpeed: 400,
backdrop: true,
perspective: false,
pauseOnHover: true,
keyboard: true,
onLoad: function() {},
onSlideEnd : function() {}
};
var mySliderInit = function (el, options) {
var settings = $.extend({}, defaults, options || {}),
el = $(el);
el.wrap('<div class="mySlider-outerwrapper"><div class="mySlider-wrapper"></div></div>');
var outerWrapper = el.closest('.mySlider-outerwrapper'),
wrapper = el.closest('.mySlider-wrapper');
var numSlides = el.find('li').length,
numElements = numSlides+4,
wrapperWidth = wrapper.width(),
slideWidth = wrapperWidth*(settings.width)/100,
sideWidth = wrapperWidth*((100 - settings.width)/2)/100;
var first_slide = el.find("li").slice(0,2),
last_slide = el.find("li").slice(-2);
el.prepend(last_slide.clone().addClass('mySlider-clone'));
el.append(first_slide.clone().addClass('mySlider-clone'));
el.width(numElements*slideWidth);
var slides = el.find('li');
slides.width(slideWidth);
//first move
var index = 0;
var slideMovement = wrapperWidth*settings.width/100;
var firstMovement = currentPosition = -(slideWidth-sideWidth+slideWidth);
el.css('transform', 'translateX('+(firstMovement)+'px)');
if(settings.controls){
outerWrapper.append('<a href="#" class="mySlider-nav mySlider-prev">'+settings.prevHtml+'</a>');
outerWrapper.append('<a href="#" class="mySlider-nav mySlider-next">'+settings.nextHtml+'</a>');
}
function moveSlider(direction){
if(direction == 'forward'){
index++;
currentPosition -= slideWidth;
} else if(direction == 'backward'){
index--;
currentPosition += slideWidth;
}
$(slides[index+2]).addClass('active').siblings().removeClass('active');
el.css('transform', 'translateX('+currentPosition+'px)');
setTimeout(function() {
if(index > numSlides-1){
index = 0;
currentPosition = firstMovement;
var loop = true;
} else if(index < 0){
index = numSlides-1;
currentPosition -= numSlides*slideWidth;
var loop = true
} else {
var loop = false;
}
if(loop){
slides.css('transition-duration', '0ms');
$(slides[index+2]).addClass('active');
el.css({
'transition-duration': '0ms',
'transform': 'translateX('+currentPosition+'px)'
});
setTimeout(function() {
el.css('transition-duration', settings.transitionSpeed+'ms');
slides.css('transition-duration', settings.transitionSpeed+'ms');
}, 20);
}
settings.onSlideEnd.call(el);
}, settings.transitionSpeed);
}
outerWrapper.on('click', '.mySlider-next', function(e){
e.preventDefault();
moveSlider('forward');
});
outerWrapper.on('click', '.mySlider-prev', function(e){
e.preventDefault();
moveSlider('backward');
});
return this;
};
$.fn.mySlider = function (settings){
return this.each(function(){
new mySliderInit($(this), settings);
});
}
}(jQuery));