javascript - 我在一个页面中创建多个 slider ...但如果幻灯片的数量彼此不同，则无法获得正确的停止位置

Question

我正在一个页面中创建多个 slider ...但如果幻灯片的数量彼此不同，则无法获得正确的停止位置..

如果我保持幻灯片的数量不变，效果会很好..

但是我需要不同数量的 slider ...

$(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;
            });
        }

     });
});

这是 jsFiddle 网址:

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

Answer 1

您通过执行 $('.myslider-wrapper').each() 正确地遍历所有 slider ，但是随后您使用 $('.thumbSlide')< 执行一些操作 应该是 $('.thumbSlide', this)。

$('.thumbSlide') 将选择页面上具有该类的所有元素，而每个回调中的 $('.thumbSlide', this) 将仅选择该特定包装器中的元素。

编辑:用这个解决方案修复了你的 jsfiddle:http://jsfiddle.net/GLSqS/1/