title: Let Carousel Move Automatically
body: <p>I want that carousel move automatically when the home page is opened;</p>
  
  <p>Currently the carousel look fine but it still not moving. it move only when the right/left buttons are clicked on </p>
  
  <p>the carousel contains multi items that should moving automatically without needing to click on rght/left buttons </p>
  
  <p>here's demo :</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>$(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>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
      .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
          .MultiCarousel .MultiCarousel-inner .item { float: left;}
          .MultiCarousel .MultiCarousel-inner .item &gt; div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;}
      .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
      .MultiCarousel .leftLst { left:0; }
      .MultiCarousel .rightLst { right:0; }
      
          .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;!------ Include the above in your HEAD tag ----------&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="1000"&gt;
              &lt;div class="MultiCarousel-inner"&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="pad15"&gt;
                          &lt;p class="lead"&gt;Multi Item Carousel&lt;/p&gt;
                          &lt;p&gt;₹ 1&lt;/p&gt;
                          &lt;p&gt;₹ 6000&lt;/p&gt;
                          &lt;p&gt;50% off&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&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 class="row"&gt;
       &lt;div class="col-md-12 text-center"&gt;
           &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
           &lt;hr/&gt;
           &lt;p&gt;Settings&lt;/p&gt;
           &lt;p&gt;Change data items for xs,sm,md and lg display items respectively. Ex:data-items="1,3,5,6"&lt;/p&gt;
           &lt;p&gt;Change data slide for slides per click Ex:data-slide="1"&lt;/p&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>