title: Make a carousel infinite or repeating
body: <p><a href="https://i.stack.imgur.com/8IleO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8IleO.png" alt="enter image description here"></a></p>
  
  <p>I'm still newbie and I'm still learning javascript/jquery. I have a code here for my carousel that I need to make it an infinite or repeating carousel, which means after the last carousel it will go back to carousel number 1.</p>
  
  <p>Here is my code for both html and javascript.</p>
  
  <p>Here is my code for the html:</p>
  
  <pre><code>&lt;div class="featured-prods"&gt;
                  &lt;h6 class="container products-feature"&gt;Featured Products&lt;/h6&gt;
              &lt;/div&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel"  data-interval="2000"&gt;
                          &lt;div class="MultiCarousel-inner"&gt;
                              &lt;?php
                                  $featured = mysqli_query($mysqli, "SELECT * FROM featured_product");
                                  while($feat = mysqli_fetch_array($featured)) {
                                      echo "&lt;div class='item'&gt;";
                                          echo "&lt;div class='feature-container'&gt;";
                                              echo "&lt;div class='feature-text'&gt;";
                                                  echo $feat['title'];
                                              echo "&lt;/div&gt;";
                                              echo "&lt;img class='img-fluid' src=".$feat['image_url']."&gt;";
                                              echo "&lt;div class='feature-overlay'&gt;";
                                                  echo "&lt;div class='feature-description'&gt;".$feat['description']."&lt;/div&gt;";
                                              echo "&lt;/div&gt;";
                                          echo "&lt;/div&gt;";
                                      echo "&lt;/div&gt;";
                                  }
                              ?&gt;
                          &lt;/div&gt;
                          &lt;button class="btn btn-primary leftLst"&gt;&lt;&lt;/button&gt;
                          &lt;button class="btn btn-primary rightLst"&gt;&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And this is my code for javascript:</p>
  
  <pre><code>$(document).ready(function () {
              var itemsMainDiv = ('.MultiCarousel');
              var itemsDiv = ('.MultiCarousel-inner');
              var itemWidth = "";
  
  
              $('.leftLst, .rightLst').click(function () {
                  var condition = $(this).hasClass("leftLst");
                  if (condition)
                      click(0, this);
                  else
                      click(1, this)
              });
              ResCarouselSize();
              $(window).resize(function () {
                  ResCarouselSize();
              });
              //this function define the size of the items
              function ResCarouselSize() {
                  var incno = 0;
                  var dataItems = ("data-items");
                  var itemClass = ('.item');
                  var id = 0;
                  var btnParentSb = '';
                  var itemsSplit = '';
                  var sampwidth = $(itemsMainDiv).width();
                  var bodyWidth = $('body').width();
                  $(itemsDiv).each(function () {
                      id = id + 1;
                      var itemNumbers = $(this).find(itemClass).length;
                      btnParentSb = $(this).parent().attr(dataItems);
                      itemsSplit = btnParentSb.split(',');
                      $(this).parent().attr("id", "MultiCarousel" + id);
                      if (bodyWidth &gt;= 1200) {
                          incno = itemsSplit[3];
                          itemWidth = sampwidth / incno;
                      }
                      else if (bodyWidth &gt;= 992) {
                          incno = itemsSplit[2];
                          itemWidth = sampwidth / incno;
                      }
                      else if (bodyWidth &gt;= 768) {
                          incno = itemsSplit[1];
                          itemWidth = sampwidth / incno;
                      }
                      else {
                          incno = itemsSplit[0];
                          itemWidth = sampwidth / incno;
                      }
                      $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
                      $(this).find(itemClass).each(function () {
                          $(this).outerWidth(itemWidth);
                      });
                      $(".leftLst").addClass("over");
                      $(".rightLst").removeClass("over");
                  });
              }
              //this function used to move the items
              function ResCarousel(e, el, s) {
                  var leftBtn = ('.leftLst');
                  var rightBtn = ('.rightLst');
                  var translateXval = '';
                  var divStyle = $(el + ' ' + itemsDiv).css('transform');
                  var values = divStyle.match(/-?[\d\.]+/g);
                  var xds = Math.abs(values[4]);
                  if (e == 0) {
                      translateXval = parseInt(xds) - parseInt(itemWidth * s);
                      $(el + ' ' + rightBtn).removeClass("over");
  
                      if (translateXval &lt;= itemWidth / 2) {
                          translateXval = 0;
                          $(el + ' ' + leftBtn).addClass("over");
                      }
                  }
                  else if (e == 1) {
                      var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
                      translateXval = parseInt(xds) + parseInt(itemWidth * s);
                      $(el + ' ' + leftBtn).removeClass("over");
  
                      if (translateXval &gt;= itemsCondition - itemWidth / 2) {
                          translateXval = itemsCondition;
                          $(el + ' ' + rightBtn).addClass("over");
                      }
                  }
                  $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
              }
              //It is used to get some elements from btn
              function click(ell, ee) {
                  var Parent = "#" + $(ee).parent().attr("id");
                  var slide = $(Parent).attr("data-slide");
                  ResCarousel(ell, Parent, slide);
              }
          });
  </code></pre>