I am creating multiple sliders in a page… but not getting the correct stop position if the number of slides are different from each other

Question

I am creating multiple sliders in a page... but not getting the correct stop position if the number of slides are different from each other..

If I keep the number of slides same it works well..

But I need different number of slides in sliders...

$(document).ready(function(){   
    $('.myslider-wrapper').each(function(){

    // thumbSlide
        var countSlider = $('.thumbSlide').length;
        if((".thumbSlide").length){        
            // Declare variables
            var totalImages = $(".thumbSlide > li").length, 
                imageWidth = $(".thumbSlide > li:first").outerWidth(true),
                totalWidth = imageWidth * totalImages,
                visibleImages = Math.round($(".thumbSlide-wrap").width() / imageWidth),
                visibleWidth = visibleImages * imageWidth,
                stopPosition = (visibleWidth - totalWidth/countSlider);  
            $(".thumbSlide").width(totalWidth+10);
            $(".thumbSlide-prev").click(function(){
                var parentMove = $(this).parent().prev('.thumbSlide');
                if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
                    parentMove.animate({left : "+=" + imageWidth + "px"});
                }               
                return false;
            });        
            $(".thumbSlide-next").click(function(){
                var parentMove = $(this).parent().prev('.thumbSlide');
                if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
                    parentMove.animate({left : "-=" + imageWidth + "px"});                  
                }               
                return false;
            });
        }

     });
});

here is jsFiddle URL:

http://jsfiddle.net/mufeedahmad/GLSqS/

Answer 1

You iterate through all sliders correctly by doing $('.myslider-wrapper').each() , but then you do some stuff with $('.thumbSlide') that should be $('.thumbSlide', this) .

$('.thumbSlide') will select all elements on the page with that class, while $('.thumbSlide', this) within the each callback will only select the element in that particular wrapper.

Edit: fixed your jsfiddle with this solution: http://jsfiddle.net/GLSqS/1/