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
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
Post a Comment