title: How to create a slideshow timer and add functioning tabs
body: <p>I've tried various different things to implement this but nothing seems to work for me i am trying to make the current progress bar have functionality e.g goes according to when each slide changes, and also add tabs that will allow a user to jump to a slide on click.</p>
  
  <p><strong><a href="http://fiddle.jshell.net/yr7tkzab/show/" rel="nofollow">Demo Fiddle</a></strong></p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div class="omega_player"&gt;
      &lt;ul class="omega_slides"&gt;
          &lt;li&gt;SLIDE 1&lt;/li&gt;
          &lt;li style="background: #aaa;"&gt;SLIDE 2&lt;/li&gt;
          &lt;li&gt;SLIDE 3&lt;/li&gt;
          &lt;li style="background: #aaa;"&gt;SLIDE 4&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="omega_controls"&gt;
          &lt;div class="omega_timer"&gt;&lt;div class="progress"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="omega_set"&gt;
              &lt;a onclick="return false" class="control_prev"&gt;&lt;i class="fa fa-angle-left"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a onclick="return false" class="control_play"&gt;&lt;i class="fa fa-play"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a onclick="return false" class="control_pause"&gt;&lt;i class="fa fa-pause"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a onclick="return false" class="control_next"&gt;&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/ul&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>jQuery(document).ready(function ($) {
      timer = setInterval(function () {
          moveRight();
      }, 8000);
  
      var slideCount = $('.omega_player&gt;.omega_slides&gt;li').length;
      var slideWidth = $('.omega_player&gt;.omega_slides&gt;li').width();
      var slideHeight = $('.omega_player&gt;.omega_slides&gt;li').height();
      var sliderUlWidth = slideCount * slideWidth;
  
      $('.omega_player').css({ width: slideWidth, height: slideHeight });
  
      $('.omega_player&gt;.omega_slides').css({ width: sliderUlWidth, marginLeft: - slideWidth });
  
      $('.omega_player&gt;.omega_slides&gt;li:last-child').prependTo('.omega_player&gt;.omega_slides');
  
      function moveLeft() {
          $('.omega_player&gt;.omega_slides').animate({
              left: + slideWidth
          }, 200, function () {
              $('.omega_player&gt;.omega_slides&gt;li:last-child').prependTo('.omega_player&gt;.omega_slides');
              $('.omega_player&gt;.omega_slides').css('left', '');
          });
      };
  
      function moveRight() {
          $('.omega_player&gt;.omega_slides').animate({
              left: - slideWidth
          }, 200, function () {
              $('.omega_player&gt;.omega_slides&gt;li:first-child').appendTo('.omega_player&gt;.omega_slides');
              $('.omega_player&gt;.omega_slides').css('left', '');
          });
      };
  
      $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_prev').click(function () {
          clearInterval(timer);
          $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_play').show();
          $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_pause').hide();
          moveLeft();
      });
  
      $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_next').click(function () {
          clearInterval(timer);
          $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_play').show();
          $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_pause').hide();
          moveRight();
      });
  
      $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_play').click(function () {
          $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_play').hide();
          $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_pause').show();
          moveRight();
          timer = setInterval(function () {
              moveRight();
          }, 8000);
      });
  
      $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_pause').click(function () {
          clearInterval(timer);
          $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_play').show();
          $('.omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_pause').hide()
      });
  
      return timer;
  
  });    
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.omega_player {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 950px;
  border-radius: 4px;
  }
  .omega_player&gt;.omega_slides {
  position: relative;
  margin: 0;
  padding: 0;
  height: 450px;
  list-style: none;
  }
  .omega_player&gt;.omega_slides&gt;li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 950px;
  height: 450px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
  }
  
  .omega_player&gt;.omega_controls {
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  margin: 0;
  padding: 0;
  background: #333;
  background: rgba(51,51,51,.8);
  position: absolute;
  z-index: 2;
  width: 100%;
  }
  .omega_player&gt;.omega_controls&gt;.omega_set {
  position: absolute;
  right: 20px;
  }
  .omega_player&gt;.omega_controls&gt;li&gt;.control_prev,
  .omega_player&gt;.omega_controls&gt;li&gt;.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
  }
  .omega_player&gt;.omega_controls&gt;li&gt;.control_prev:hover,
  .omega_player&gt;.omega_controls&gt;li&gt;.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
  }
  .omega_player&gt;.omega_controls&gt;li&gt;.control_prev {
  border-radius: 0 2px 2px 0;
  }
  .omega_player&gt;.omega_controls&gt;li&gt;.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
  }
  .omega_player&gt;.omega_controls&gt;li&gt;.control_play,
  .omega_player&gt;.omega_controls&gt;li&gt;.control_pause {
  background-color: green;
  color: #fff;
  padding: 10px;
  }
  .omega_player&gt;.omega_controls&gt;li&gt;.control_play {
  display: none!important;
  }
  .omega_player&gt;.omega_controls&gt;.omega_set&gt;a {
  color: #FFF;
  color: rgba(250,250,250,.95);
  font-size: 20px;
  vertical-align: middle;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
  }
  .omega_player&gt;.omega_controls&gt;.omega_set&gt;:hover {
  background: rgba(0,0,0,0.2);
  color: #FFF;
  }
  .omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_prev,
  .omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_next,
  .omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_play,
  .omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_pause {
  font-size: 45px;
  line-height: 0;
  margin: 0;
  height: 50px;
  width: 50px;
  padding: 0;
  text-align: center;
  transition: .1s ease-in-out;
  border: 1px solid #FFF;
  border-color: rgba(250,250,250,0.65);
  border-top: 0;
  border-bottom: 0;
  float: left;
  }
  .omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_play,
  .omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_pause {
  border:0;
  font-size: 25px;
  line-height: 48px;
  }
  .omega_player&gt;.omega_controls&gt;.omega_set&gt;.control_play {
  display:none;
  }
  
  .omega_player&gt;.omega_controls&gt;.omega_timer {
  background: #333;
  background: rgba(51,51,51,.9);
  height: 4px;
  top: -4px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  }
  .omega_player&gt;.omega_controls&gt;.omega_timer&gt;.progress {
  height: 4px;
  display: inline-block;
  background-color: #EB0000;
  background: rgba(235, 0, 0, 0.86);
  position: absolute;
  width: 60%;
  z-index: 999;
  }
  
  html,
  body {margin:0;padding:0;font-family: sans-serif;font-size: 14px;}
  </code></pre>
  
  <p>Hope you can help thanks in advance!</p>