September 5, 201115 yr Hi, I have a page where I want to use two jquery sliders. To be honest my javascript knowledge is pretty awful, but I've managed to set up the sliders. The only problem is that when I press the next button on one of the sliders, it triggers the wrong one to move. I've tried using separate id's and having a different javascript file for each slider (have no idea if this is the right thing to do ) If anyone knows how to fix this I would really appreciate any help. The code i am using for the sliders is: (function($) { $.fn.easySlider = function(options){ // default configuration properties var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', orientation: '', // 'vertical' is optional; speed: 800 }; var options = $.extend(defaults, options); return this.each(function() { obj = $(this); var s = $("li", obj).length; var w = obj.width(); var h = obj.height(); var ts = s-1; var t = 0; var vertical = (options.orientation == 'vertical'); $("ul", obj).css('width',s*w); if(!vertical) $("li", obj).css('float','left'); $(obj).after('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'); $("a","#"+options.prevId).hide(); $("a","#"+options.nextId).hide(); $("a","#"+options.nextId).click(function(){ animate("next"); if (t>=ts) $(this).fadeOut(); $("a","#"+options.prevId).fadeIn(); }); $("a","#"+options.prevId).click(function(){ animate("prev"); if (t<=0) $(this).fadeOut(); $("a","#"+options.nextId).fadeIn(); }); function animate(dir){ if(dir == "next"){ t = (t>=ts) ? ts : t+1; } else { t = (t<=0) ? 0 : t-1; }; if(!vertical) { p = (t*w*-1); $("ul",obj).animate( { marginLeft: p }, options.speed ); } else { p = (t*h*-1); $("ul",obj).animate( { marginTop: p }, options.speed ); } }; if(s>1) $("a","#"+options.nextId).fadeIn(); }); }; })(jQuery);
Create an account or sign in to comment