title: Why is my counter in my carousel returning negative values after reaching the 0 index and max index?
body: <p>Why is my counter going to a negative value after reaching the 0 index and max index? I have code that is supposed to be resetting the index value to the first or last index when this happens. When the user clicks on Next/Previous and they come to the beginning or end of the carousel the index of the slide should reset to the first or last index depending on the current index position.</p>
  
  <p>My slides disappear when the user clicks next 6 times and then clicks on previous 3 times.</p>
  
  <p>If anyone could assist me with this I would be very grateful!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      // Default controls
      var defControls = {
          content: "img", // accepts any DOM element - div, img, table, etc...
          showControls: true, // true/false shows/hides the carousel's navigational controls
          effect: "default", // supports default, fade, slide, verticalSlide, slidingFade
          effectDuration: 0.25, // to be used in conjunction with effect - adjust the time of the effect measured in seconds
          prevText: "&amp;laquo; Previous", // previous button text
          nextText: "Next &amp;raquo;", // next button text
          containerWidth: 600, // determines the width of the content container
          cycleback: false, // allows for cycling back through images
          autoplay: false, // automatically cycle through the slides in the carousel
          pauseTime: 10 // to be used in conjunction with autoplay - sets the pause time inbetween each slide
      };
  
      // Variable declarations
      var controls = {};
  
      // Checks for userControls
      if (typeof userControls !== "undefined") {
          controls = $.extend({}, defControls, userControls);
      } else {
          controls = defControls;
      }
  
      var contentType = $(controls.content);
      var $el = $("#showcase");
      var $leftArrow = "#left_arrow";
      var $rightArrow = "#right_arrow";
      var $load = $el.find(contentType)[0];
      var slideCount = $el.children().length;
      var slideContent = $el.children();
      var slideNum = 1;
      var counter = $(".active").index();
  
      // Checks if the content in the carousel is an img and then determines the width of the container based on the size of the content
      if (controls.content === "img") {
          controls.containerWidth = $(".slide").width();
      }
  
      // Preloads carousel with correct settings
      $el.css("width", controls.containerWidth);
      $el.find(contentType)[0].setAttribute("class", "active");
  
      // Checks to see if the setting for carousel controls are set to show on the page
      if (controls.showControls === true) {
          $(
              '&lt;div id="controls"&gt;&lt;a href="#" id="' +
                  $leftArrow.replace("#", "") +
                  '"&gt;' +
                  controls.prevText +
                  '&lt;/a&gt; &lt;a href="#" id="' +
                  $rightArrow.replace("#", "") +
                  '"&gt;' +
                  controls.nextText +
                  "&lt;/a&gt;&lt;/div&gt;"
          ).insertAfter("#showcase");
          $("#controls").find("#left_arrow").addClass("disabled");
      }
  
      // Checks to see if the setting for cycleback is enabled
      if (controls.cycleback === true) {
          $("#controls").find("#left_arrow").removeClass("disabled");
      }
  
      // Checks to see if the setting for autoplay is enabled
      if (controls.autoplay === true) {
          $("#controls").find("#left_arrow").removeClass("disabled");
          controls.cycleback = true;
          var interval;
          var timer = function() {
              interval = setInterval(function() {
                  $("#right_arrow").click();
              }, controls.pauseTime * 1000);
          };
          timer();
      }
  
      // Logic for the carousel effects
      function effects(action) {
          switch (controls.effect) {
              // Fade effect
              case "fade":
                  if (controls.content == "img") {
                      $el.css("background", "#000");
                  }
  
                  $(".slide").stop().animate({ opacity: 0 }, controls.effectDuration * 300, function() {
                      $(".active").stop().animate({ opacity: 1 }, controls.effectDuration * 1000);
                  });
                  break;
  
              // Slide effect
              case "slide":
                  if (action == "prev") {
                      $(".slide").css("left", -controls.containerWidth);
                      $(".slide")
                          .stop()
                          .animate({ left: -controls.containerWidth }, controls.effectDuration * 800,
                              function() {
                                  $(".active").stop().animate({ left: 0 }, controls.effectDuration * 1000);
                              }
                          );
                  } else if (action == "next") {
                      $(".slide").css("left", controls.containerWidth);
                      $(".slide")
                          .stop()
                          .animate({ left: controls.containerWidth }, controls.effectDuration * 800,
                              function() {
                                  $(".active").stop().animate({ left: 0 }, controls.effectDuration * 1000);
                              }
                          );
                  }
                  break;
  
              case "verticalSlide":
                  if (action == "prev") {
                      $(".slide").css("top", -controls.containerWidth);
                      $(".slide")
                          .stop()
                          .animate({ top: -controls.containerWidth }, controls.effectDuration * 800,
                              function() {
                                  $(".active").stop().animate({ top: 0 }, controls.effectDuration * 1000);
                              }
                          );
                  } else if (action == "next") {
                      $(".slide").css("top", controls.containerWidth);
                      $(".slide").stop().animate({ top: controls.containerWidth }, controls.effectDuration * 800,
                              function() {
                                  $(".active").stop().animate({ top: 0 }, controls.effectDuration * 1000);
                              }
                          );
                  }
                  break;
  
              // Sliding fade effect
              case "slidingFade":
                  if (action == "prev") {
                      $(".slide").css("left", -controls.containerWidth);
                      $(".slide").stop().animate({ left: -controls.containerWidth, opacity: 0 }, controls.effectDuration * 1400,
                              function() {
                                  $(".active").stop().animate({ left: 0, opacity: 1 }, controls.effectDuration * 1200);
                              }
                          );
                  } else if (action == "next") {
                      $(".slide").css("left", controls.containerWidth);
                      $(".slide").stop().animate({ left: controls.containerWidth, opacity: 0 }, controls.effectDuration * 1400,
                              function() {
                                  $(".active").stop().animate({ left: 0, opacity: 1 }, controls.effectDuration * 1200);
                              });
                  }
                  break;
  
              // Default effect
              case "default":
                  break;
          }
      }
  
      // Checks for the first and last index in the carousel
      function checkSlide() {
          if (controls.cycleback === false) {
              if (slideNum == 1) {
                  $($leftArrow).addClass("disabled");
              } else {
                  $($leftArrow).removeClass("disabled");
              }
  
              if (slideNum == slideCount) {
                  $($rightArrow).addClass("disabled");
              } else {
                  $($rightArrow).removeClass("disabled");
              }
          } else {
              $($leftArrow).removeClass("disabled");
              $($rightArrow).removeClass("disabled");
          }
      }
  
      // Navigational logic for the previous/next buttons
      $(document).on("click", $leftArrow, function(e) {
          if (controls.cycleback === false) {
              if (slideNum &gt; 1) {
                  counter--;
                  $(".active").addClass("slide");
                  $(".active").removeClass("active");
  console.log(counter);
                  // Sends the effect value to the switch
                  effects("prev");
  console.log(counter);
                  $el.find(contentType).eq(counter).addClass("active");
                  slideNum--;
  
                  // Checks the current slide index
                  checkSlide();
              }
              e.preventDefault();
          } else {
              if (slideNum &gt; 1) {
                  counter--;
                  $(".active").addClass("slide");
                  $(".active").removeClass("active");
  
                  // Sends the effect value to the switch
                  effects("prev");
  console.log(counter);
                  $el.find(contentType).eq(counter).addClass("active");
                  slideNum--;
  
                  // Checks the current slide index
                  checkSlide();
  
                  // Resets the autoplay timer if previous is clicked
                  if (controls.autoplay === true) {
                      clearInterval(interval);
                      timer();
                  }
              } else {
                  counter = $(".active").index() + (slideNum - 1);
                  $(".active").addClass("slide");
                  $(".active").removeClass("active");
  
                  // Sends the effect value to the switch
                  effects("next");
  console.log(counter);
                  $el.find(contentType).eq(counter).addClass("active");
                  slideNum++;
  
                  // Checks the current slide index
                  checkSlide();
  
                  // Resets the autoplay timer if previous is clicked
                  if (controls.autoplay === true) {
                      clearInterval(interval);
                      timer();
                  }
              }
              e.preventDefault();
          }
      });
  
      $(document).on("click", $rightArrow, function(e) {
          if (controls.cycleback === false) {
              if (slideNum &lt; slideCount) {
                  counter++;
                  $(".active").addClass("slide");
                  $(".active").removeClass("active");
  console.log(counter);
                  // Sends the effect value to the switch
                  effects("next");
  console.log(counter);
                  $el.find(contentType).eq(counter).addClass("active");
                  slideNum++;
  
                  // Checks the current slide index
                  checkSlide();
              }
              e.preventDefault();
          } else {
              if (slideNum &lt; slideCount) {
                  counter++;
                  $(".active").addClass("slide");
                  $(".active").removeClass("active");
  
                  // Sends the effect value to the switch
                  effects("next");
  console.log(counter);
                  $el.find(contentType).eq(counter).addClass("active");
                  slideNum++;
  
                  // Checks the current slide index
                  checkSlide();
  
                  // Resets the autoplay timer if previous is clicked
                  if (controls.autoplay === true) {
                      clearInterval(interval);
                      timer();
                  }
              } else {
                  counter = $(".active").index() - (slideCount - 1);
                  $(".active").addClass("slide");
                  $(".active").removeClass("active");
  
                  // Sends the effect value to the switch
                  effects("next");
  console.log(counter);
                  $el.find(contentType).eq(counter).addClass("active");
                  slideNum++;
  
                  // Checks the current slide index
                  checkSlide();
  
                  // Resets the autoplay timer if previous is clicked
                  if (controls.autoplay === true) {
                      clearInterval(interval);
                      timer();
                  }
              }
              e.preventDefault();
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   margin: 0px;
   padding: 0px;
  }
  
  #showcase {
   overflow: hidden;
   position: relative;
   background: green;
  }
  
  .disabled {
   color: red !important;
  }
  
  .slide {
   display: none;
   opacity: 0;
   position: relative;
  }
  
  .active {
   display: block;
   opacity: 1;
   position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="showcase"&gt;
   &lt;img class="slide" src="https://picsum.photos/458/354/?image=306" /&gt;
   &lt;img class="slide" src="https://picsum.photos/458/354/?image=626" /&gt;
   &lt;img class="slide" src="https://picsum.photos/458/354/?image=806" /&gt;
   &lt;!-- &lt;div class="slide"&gt;content 1&lt;/div&gt;
   &lt;div class="slide"&gt;content 2&lt;/div&gt;
   &lt;div class="slide"&gt;content 3&lt;/div&gt; --&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  userControls = {
   effectDuration : .5,
   cycleback : true
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>