如何獲取上一張和第一張幻燈片以激活下一個和上一個按鈕或相應地禁用

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

 });

}）;

更新小提琴