52576

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 <a href="http://jsfiddle.net/rGLsG/70/" rel="nofollow">http://jsfiddle.net/rGLsG/70/</a>

$(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))); }); } });

Answer1:

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))); }); } });

Answer2:

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',''); }

Answer3:

$(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 <a href="http://jsfiddle.net/rGLsG/92/" rel="nofollow">http://jsfiddle.net/rGLsG/92/</a>

Recommend

  • Dynamic add slide in flexslider carousel
  • How to count number of Button clicks in Android [closed]
  • Updating multiple instances of App Widget in Android
  • NSPopover in NSCollectionView (or not)
  • Gridview Item dynamic width according to Screen Size in UWP
  • Button Click Counter in PHP
  • How to get text from textBlock during SelectionChangeEvent from a ListBox?
  • Set the amount of displaying Flex Slider carousel image
  • Python: “Print” and “Input” in one line [duplicate]
  • How is user.dir configured for Tomcat servlets?
  • Stretch a span across a td
  • Android gcm notification payload vs data payload?
  • Ant: fileset “dir” attribute with a runtime expanded full path
  • Class implementation in a header file == bad style? [duplicate]
  • composer dependency stating in doesn't have php-xsl
  • custom string delimiters stringtemplate-4
  • Should a web service response include empty values?
  • xtable - background colour of added rows
  • Cut the background to expose the layer below
  • How to return DataSet (xsd) in WCF
  • Suppressing passwd when calling sqlplus from shell script
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • jQuery .attr() and value
  • Using jQuery closest() method with class selector
  • Azure Cloud Service Web Role web pages do not load
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • How to show dropdown in excel using jrxml (jasper api)?
  • Jquery - Jquery Wysiwyg return html as a string
  • Revoking OAuth Access Token Results in 404 Not Found
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • sending mail using smtp is too slow
  • Is there any way to bind data to data.frame by some index?
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How can i traverse a binary tree from right to left in java?
  • How can I use `wmic` in a Windows PE script?