html - jQuery carousel new style next and prev on first and last slide -


i'm new jquery , use jquery carousel. don't want use plugin. want ask how can make prev button style/color, when on first slide , how can make next button style/color,, when on last slide.

here demo

http://jsfiddle.net/rglsg/24/

here jquery code

      $(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        carousel.width(itemwidth*carouselchild.length);           refreshchildposition();           $('.btnnext').click(function(e){         if($(".carousel").find("li:eq(6)").text()!=14) {     if(canclick) {         canclick = false;         clickcount++;         //animate slider left item width          carousel.stop(false, true).animate({             left : '-='+itemwidth         },300, function(){             //find first item , append last item.             lastitem = carousel.find('li:first');             lastitem.remove().appendto(carousel);             lastitem.css('left', ((carouselchild.length-1)*(itemwidth))+(clickcount*itemwidth));             canclick = true;         });     } } 

});

         $('.btnprevious').click(function(){   if($(".carousel").find("li:eq(0)").text()!=1) {     if(canclick){         canclick = false;         clickcount--;         //find first item , append last item.         lastitem = carousel.find('li:last');         lastitem.remove().prependto(carousel);          lastitem.css('left', itemwidth*clickcount);                      //animate slider right item width          carousel.finish(true).animate({             left: '+='+itemwidth         },300, function(){             canclick = true;         });     } }  });         function refreshchildposition(){ carouselchild.each(function(){     $(this).css('left', itemwidth*carouselchild.index($(this))); }); 

}

try previous button

var check = $(".carousel ul").position().left;         if (check == 0)         {              $(".btnprevious").css('color','red');           } 

similar condition next

 var cwidth = $(".carousel").width();     var check = $(".carousel ul").position().left;     if (check == -cwidth )                 {                      $(".btnnext").css('color','red');                   } 

Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -