title: Automating CSS image carousel
body: <p>I have a 5 image carousel that works as a banner on my site. It is entirely written in CSS and works like a charm, but I think it would improve UX to have it rotate the slides on a timer.</p>
  
  <p>Here is the code I have, all the slides are denoted by an <code>:nth-of-type</code> selector, so I have tried to increment the index value via <code>setTimeout()</code>.</p>
  
  <pre><code>$(document).ready(function() {
      var x,
      $slider = $(".carousel__track .carousel__slide:nth-of-type(x)");
  
      setTimeout(function() {
          if (x = 5) {
              x = 1
          } else {
              x + 1
          }
      }, 500);
  });
  </code></pre>
  
  <p>Thanks in advance for the help.</p>