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

Question

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

如果我保持幻灯片的数量相同，它运作良好..

但我在滑块中需要不同数量的幻灯片......

$(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 URL：

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

Answer 1

你通过执行$('.myslider-wrapper').each()正确迭代所有滑块，但是你用$('.thumbSlide')做一些应该是$('.thumbSlide', this) 。

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

编辑：使用此解决方案修复您的jsfiddle： http ： //jsfiddle.net/GLSqS/1/