如何获取上一张和第一张幻灯片以激活下一个和上一个按钮或相应地禁用

Question

我已经创建了此滑块代码...

试图获取第一张和最后一张幻灯片以激活下一个和上一个按钮或随意禁用...任何人都可以帮助我获得它。

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

    // thumbSlide
        var countSlider = $('.thumbSlide', this).length;
        if((".thumbSlide").length){        
            // Declare variables
            var totalImages = $(".thumbSlide > li", this).length, 
                imageWidth = $(".thumbSlide > li:first", this).outerWidth(true),
                totalWidth = imageWidth * totalImages,
                visibleImages = Math.round($(".thumbSlide-wrap", this).width() / imageWidth),
                visibleWidth = visibleImages * imageWidth,
                stopPosition = (visibleWidth - totalWidth/countSlider);  
            $(".thumbSlide", this).width(totalWidth+10);
        }
                $(".thumbSlide-prev", this).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", this).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/GLSqS/1/

非常感谢..

Answer 1

您可以这样操作，而不是使用每张幻灯片的下一个和上一个使用ID的类来隐藏特定的幻灯片而不是全部，我将其留给您，

我对该代码做了一些更改，以显示和隐藏下一个和上一个按钮：

if($('.thumbSlide li:first')){
        $('.thumbSlide-prev').hide();
                }
            $(".thumbSlide-prev", this).click(function(){
            var parentMove = $(this).parent().prev('.thumbSlide');
             $(".thumbSlide-next").show();   
            if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
                parentMove.animate({left : "+=" + imageWidth + "px"});
            }else{
            $('.thumbSlide-prev').hide();
            }               
            return false;
        });        
        $(".thumbSlide-next", this).click(function(){
            var parentMove = $(this).parent().prev('.thumbSlide');
            //var parent=$(this).parent();
            $(".thumbSlide-prev").show();                
            if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
                parentMove.animate({left : "-=" + imageWidth + "px"});                  
            }else{
            $(".thumbSlide-next").hide();
            }               
            return false;
        });

演示小提琴

Answer 2

我已经稍微修改了您的代码。 尝试下面的小提琴。

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

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

            $(this).parent().find('.thumbSlide-next').addClass('disable');

            }               
            return false;
        });        

 });

}）;

更新小提琴