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

Question

I have created this slider code...

trying to get first and last slide to make next and previous button active or disable accordigly... can anyone help me to get it..

$(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/

many thanks..

Answer 1

You can do it this way, instead of class for next and previous use id for each slide to hide that particular one instead of all, i leave that to you,

I have done few changes to this code to show and hide, next and previous buttons:

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

Demo Fiddle

Answer 2

I have modified your code little bit. Try the fiddle below.

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

 });

});

Updated Fiddle