javascript - jQuery next and prev button -
i'm new jquery , use jquery carousel. don't want use plugin.i try make next , prev button color on last , first slide. that's work. problem buttons stay "red" when not more on last , first slide
here 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 won't wrap carousel.width(itemwidth*carouselchild.length); //place child elements original locations. refreshchildposition(); //set event handlers buttons. $('.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; }); } } 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 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; }); } } if(canclick) { canclick = false; { $(".btnprevious").css('color','red'); } canclick = true; } }); function refreshchildposition(){ carouselchild.each(function(){ $(this).css('left', itemwidth*carouselchild.index($(this))); }); } });
just addaed 2 if statments 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 won't wrap carousel.width(itemwidth*carouselchild.length); //place child elements original locations. refreshchildposition(); //set event handlers 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 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; }); } } 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 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; }); } } if(canclick) { canclick = false; { $(".btnprevious").css('color','red'); } canclick = true; } }); function refreshchildposition(){ carouselchild.each(function(){ $(this).css('left', itemwidth*carouselchild.index($(this))); }); } });
Comments
Post a Comment