title: Navigation buttons with a CSS slider
body: <p>I have a CSS slider that works for the most part except for two things I cannot figure out. The first being, how to get my slider navigation buttons to work the way I am after. Right now, if you click on one, my <code>addClass</code> adds <code>.active</code> to all of the buttons instead of only the one clicked on. Along with that I cannot figure out how to associate the slider position with the navigation menu. What I mean is if the user does not click any of the buttons I still want the buttons to show which slide is active.</p>
  
  <p>MY second issue is whenever the buttons are clicked it stops the slide show.</p>
  
  <p>What am I doing wrong in my attempts?</p>
  
  <p>Off-topic, but would it be difficult to transition what I have now to fade in the slides rather than sliding them?</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>$('.control-button').click(function() {
      button = $(this).attr('id');
      id = button.replace('slide', '');
      pos = (id - 1) * 100;
      $('div#slider figure').css('animation-play-state', 'paused');
      $('div#slider figure').removeClass('figure2');
      $('.control-button').addClass('active');
      posStr = '-' + pos + '%';
      $('.figure').css('left', posStr);
  });
  
  $('img').click(function() {
      $('div#inner').css('left', '0px');
      $('div#slider figure').addClass('figure2');
      $('div#slider figure').css('animation-play-state', 'running');
  
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#slider {
      width: 100%;
      overflow: hidden;
  }
  div#slider .figure {
      position: relative;
      width: 400%;
      margin: 0;
      padding: 0;
      font-size: 0;
      text-align: left;
      /*animation: 20s company-slider infinite;*/
  }
  .figure2 {
      animation: 20s company-slider infinite;
  }
  @keyframes company-slider {
      0% {
          left: 0%;
      }
      30% {
          left: 0%;
      }
      35% {
          left: -100%;
      }
      55% {
          left: -100%;
      }
      60% {
          left: -200%;
      }
      90% {
          left: -200%;
      }
      95% {
          left: -300%;
      }
      100% {
          left: -300%;
      }
  }
  div#slider figure img {
      width: 25%;
      min-height: 100%;
      float: left;
  }
  /*div#slider figure:hover { animation-play-state:paused; }*/
  
  div#slider li {
      list-style: none;
  }
  div#slider label {
      background-color: #111;
      bottom: .5em;
      cursor: pointer;
      display: block;
      height: .5em;
      position: absolute;
      width: .5em;
      z-index: 10;
  }
  #controls {
      width: 100%;
      height: auto;
  }
  #control-container {
      padding: 25px 12%;
  }
  .control-button {
      display: inline;
      margin: 0 2%;
      width: 25%;
      background: gray;
      height: 10px;
      border: none;
  }
  .control-button.active {
      display: inline;
      margin: 0 2%;
      width: 25%;
      background: black;
      height: 10px;
      border: none;
  }</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;div id="slider"&gt;
      &lt;figure class="figure figure2"&gt;
          &lt;img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt&gt;
          &lt;img src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt&gt;
          &lt;img src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt&gt;
          &lt;img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt&gt;
      &lt;/figure&gt;
      &lt;div id="controls"&gt;
          &lt;div id="control-container"&gt;
              &lt;button id="slide1" class="control-button"&gt;&lt;/button&gt;
              &lt;button id="slide2" class="control-button"&gt;&lt;/button&gt;
              &lt;button id="slide3" class="control-button"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>