jQuery next and prev button

Question

I'm very new with jQuery and I use this jQuery carousel. I don't want to use any plugin.I try to make my next and prev button another color on last and first slide. That's almost work. The problem is that buttons stay "red" also when they are not more on last and first slide

here is demo http://jsfiddle.net/rGLsG/70/

$(function(){
    var carousel = $('.carousel ul');
    var carouselChild = carousel.find('li');
    var clickCount = 0;
    var canClick = true;

    itemWidth = carousel.find('li:first').width()+1; //Including margin

    //Set Carousel width so it won't wrap
    carousel.width(itemWidth*carouselChild.length);

    //Place the child elements to their original locations.
    refreshChildPosition();

    //Set the event handlers for buttons.
    $('.btnNext').click(function(e){        
        if($(".carousel").find("li:eq(6)").text()!=14) {
            if(canClick) {
                canClick = false;
                clickCount++;
                //Animate the slider to left as item width 
                carousel.stop(false, true).animate({
                    left : '-='+itemWidth
                },300, function(){
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
                    canClick = true;
                });
            }
        }


                if(canClick) {
            canClick == 14;  {
             $(".btnNext").css('color','red');  
        }

                    canClick = true; 
        }
    });

    $('.btnPrevious').click(function(){
        if($(".carousel").find("li:eq(0)").text()!=1) {
            if(canClick){
                canClick = false;
                clickCount--;
                //Find the first item and append it as the last item.
                lastItem = carousel.find('li:last');
                lastItem.remove().prependTo(carousel);

                lastItem.css('left', itemWidth*clickCount);             
                //Animate the slider to right as item width 
                carousel.finish(true).animate({
                    left: '+='+itemWidth
                },300, function(){
                    canClick = true;
                });
            }
        }


                if(canClick) {
            canClick = false;  {
             $(".btnPrevious").css('color','red');  
        }

                    canClick = true; 
        }
    });

    function refreshChildPosition(){
        carouselChild.each(function(){
            $(this).css('left', itemWidth*carouselChild.index($(this)));
        });
    }
});

Answer 1

Your javascript is a bit messy. Currently you have this:

if(canClick) {
    canClick = false;  {
         $(".btnNext").css('color','red');  
    }

    canClick = true; 
 }

Which doesn't make sense. And there is no else block to undo the color:

if(canClick) {
    canClick = false;
    $(".btnNext").css('color','red');  
} else {          
    canClick = true; 
    $(".btnNext").css('color','');
}

Answer 2

just addaed 2 if statments that should fix it:

$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;

itemWidth = carousel.find('li:first').width()+1; //Including margin

//Set Carousel width so it won't wrap
carousel.width(itemWidth*carouselChild.length);

//Place the child elements to their original locations.
refreshChildPosition();

//Set the event handlers for buttons.
$('.btnNext').on("click",function(e){   
    if($('.btnPrevious').css("color")=="rgb(255, 0, 0)"){
        $('.btnPrevious').css("color","");
    }    


    if($(".carousel").find("li:eq(6)").text()!=14) {
        if(canClick) {
            canClick = false;
            clickCount++;
            //Animate the slider to left as item width 
            carousel.stop(false, true).animate({
                left : '-='+itemWidth
            },300, function(){
                //Find the first item and append it as the last item.
                lastItem = carousel.find('li:first');
                lastItem.remove().appendTo(carousel);
                lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
                canClick = true;
            });
        }
    }


            if(canClick) {
        canClick = false;  {
         $(".btnNext").css('color','red');  
    }

                canClick = true; 
    }
});

$('.btnPrevious').on("click",function(){
    if($('.btnNext').css("color")=="rgb(255, 0, 0)"){
        $('.btnNext').css("color","");
    }

    if($(".carousel").find("li:eq(0)").text()!=1) {
        if(canClick){
            canClick = false;
            clickCount--;
            //Find the first item and append it as the last item.
            lastItem = carousel.find('li:last');
            lastItem.remove().prependTo(carousel);

            lastItem.css('left', itemWidth*clickCount);             
            //Animate the slider to right as item width 
            carousel.finish(true).animate({
                left: '+='+itemWidth
            },300, function(){
                canClick = true;
            });
        }
    }


            if(canClick) {
        canClick = false;  {
         $(".btnPrevious").css('color','red');  
    }

                canClick = true; 
    }
});

function refreshChildPosition(){
    carouselChild.each(function(){
        $(this).css('left', itemWidth*carouselChild.index($(this)));
    });
}
});

Answer 3

$(function() {
    var carousel = $('.carousel ul');
    var carouselChild = carousel.find('li');
    var clickCount = 0;
    var canClick = true;

    itemWidth = carousel.find('li:first').width() + 1; //Including margin

    //Set Carousel width so it won't wrap
    carousel.width(itemWidth * carouselChild.length);

    //Place the child elements to their original locations.
    refreshChildPosition();

    //Set the event handlers for buttons.
    $('.btnNext').click(function(e) {
        if ($(".carousel").find("li:eq(6)").text() != 14) {
            if (canClick) {
                canClick = false;
                clickCount++;
                //Animate the slider to left as item width 
                carousel.stop(false, true).animate({
                    left: '-=' + itemWidth
                }, 300, function() {
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    lastItem.css('left', ((carouselChild.length - 1) * (itemWidth)) + (clickCount * itemWidth));
                    canClick = true;
                });
            }
        }
        if ($(".carousel").find("li:eq(0)").text() >= 1) {
            $(".btnPrevious").css('color', '');

        }
        if (canClick) {
            canClick = false; {
                $(".btnNext").css('color', 'red');
            }

            canClick = true;
        }
    });

    $('.btnPrevious').click(function() {
        if ($(".carousel").find("li:eq(0)").text() != 1) {
            if (canClick) {
                canClick = false;
                clickCount--;
                //Find the first item and append it as the last item.
                lastItem = carousel.find('li:last');
                lastItem.remove().prependTo(carousel);

                lastItem.css('left', itemWidth * clickCount);
                //Animate the slider to right as item width 
                carousel.finish(true).animate({
                    left: '+=' + itemWidth
                }, 300, function() {
                    canClick = true;
                });
            }
        }
        if ($(".carousel").find("li:eq(6)").text() != 14){
            $(".btnNext").css('color', '');
        }

        if (canClick) {
            canClick = false; {
                $(".btnPrevious").css('color', 'red');
            }

            canClick = true;
        }
    });

    function refreshChildPosition() {
        carouselChild.each(function() {
            $(this).css('left', itemWidth * carouselChild.index($(this)));
        });
    }
});

check this http://jsfiddle.net/rGLsG/92/