title: Set Carousel to slide automatically
body: <p>I have a simple carousel. </p>
  
  <p>I'd like to make it slide automatically instead of having to click the arrows.</p>
  
  <p><strong>Demo:</strong> <a href="https://jsfiddle.net/vbcL9npo/" rel="nofollow">https://jsfiddle.net/vbcL9npo/</a></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>carousel = (function(){
  
    // Read necessary elements from the DOM once
    var box = document.querySelector('.carouselbox');
    var next = box.querySelector('.next');
    var prev = box.querySelector('.prev');
  
    // Define the global counter, the items and the 
    // current item 
    var counter = 0;
    var items = box.querySelectorAll('.content li');
    var amount = items.length;
    var current = items[0];
  
    box.classList.add('active');
  
    // navigate through the carousel
  
    function navigate(direction) {
  
      // hide the old current list item 
      current.classList.remove('current');
      
      // calculate th new position
      counter = counter + direction;
  
      // if the previous one was chosen
      // and the counter is less than 0 
      // make the counter the last element,
      // thus looping the carousel
      if (direction === -1 &amp;&amp; 
          counter &lt; 0) { 
        counter = amount - 1; 
      }
  
      // if the next button was clicked and there 
      // is no items element, set the counter 
      // to 0
      if (direction === 1 &amp;&amp; 
          !items[counter]) { 
        counter = 0;
      }
  
      // set new current element 
      // and add CSS class
      current = items[counter];
      current.classList.add('current');
    }
  
    // add event handlers to buttons
    next.addEventListener('click', function(ev) {
      navigate(1);
    });
    prev.addEventListener('click', function(ev) {
      navigate(-1);
    });
  
    // show the first element 
    // (when direction is 0 counter doesn't change)
    navigate(0);
  
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carouselbox {
        font-family: helvetica,sans-serif;
        font-size: 14px;
        width: 100px;
        position: relative;
        margin: 1em;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 10px #ccc;
        overflow: hidden;
      }
      .content {
        margin: 0;
        padding: 0;
      }
      .content li {
        font-size: 100px;
        margin: 0;
        padding: 0;
        width: 100%;
        list-style: none;
        text-align: center;
        z-index: 2;
      }
  
  
      .active {
        height: 130px;
      }
      .carouselbox button {
        border: none;
        visibility: hidden;
      }
      .active button {
        visibility: visible;
      } 
      .offscreen {
        position: absolute;
        left: -2000px;
      }
  
      .active .buttons {
        padding: 5px 0;
        background: #eee;
        text-align: center;
        z-index: 10;
        position: relative;
      }
      .active li {
        position: absolute;
        top: 130px;
  
        opacity: 0;
        transform: scale(0);
        transition: 1s;
      }
      .active li.current {
        top: 30px;
  
        opacity: 1;
        transform: scale(1);
        transition: 1s;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="carouselbox"&gt;
    &lt;div class="buttons"&gt;
      &lt;button class="prev"&gt;
         ◀ &lt;span class="offscreen"&gt;Previous&lt;/span&gt;
      &lt;/button&gt;
      &lt;button class="next"&gt;
        &lt;span class="offscreen"&gt;Next&lt;/span&gt; ▶ 
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;ol class="content"&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>