jQuery carousel hide next and prev on first and last slide -
i'm new jquery , use jquery carousel. don't want use plugin. want ask how can hide next button, when on first slide , how can hide next butto, 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 //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; }); } } }); $('.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))); }); }
});
<a href="javascript:void(0);" class="btnprevious">previous</a> <a href="javascript:void(0);" class="btnnext">next</a> <div class="carousel"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> </ul> </div>
$(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' ) { $('.btnprevious').show(); 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 ($(".carousel").find("li:eq(7)").text()=='14'){ $('.btnnext').hide(); } } } }); $('.btnprevious').click(function(){ if($(".carousel").find("li:eq(0)").text()!=1) { $('.btnnext').show(); 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 ($(".carousel").find("li:eq(0)").text()=='1'){ $('.btnprevious').hide(); } } } }); function refreshchildposition(){ carouselchild.each(function(){ $(this).css('left', itemwidth*carouselchild.index($(this))); }); }
});
Comments
Post a Comment