title: trying to solve this bug in jquery slider controls
body: <p>I've been trying to figure this out for many, many hours. I'm having an issue where the indicators on this jquery slider will stop changing opacity if you click on them after the slideshow has looped. </p>
  
  <p>Furthermore the first indicator doesn't seem to be changing opacity at all when you click on it. </p>
  
  <pre><code>function slideSwitch() {
  
  var $active = $('.bannercontainer IMG.active');
  var $indicator = $('.bannerindicator.active');
  
   if ( $active.length == 0 ) $active = $('.bannercontainer IMG:last');
  
   if ( $indicator.length == 0 ) $indicator = $('.bannerindicator:last');
  
  var $next = $active.next().length ? $active.next()
      : $('.bannercontainer img:first');    
  
  var $nexti = $indicator.next().length ? $indicator.next()
      : $('.bannerindicator:first');
  
  $next.addClass('active');
  
      $nexti.animate({opacity: 1}, 1000, function() {
      $nexti.addClass('active');
          }); 
  
   $active.animate({opacity: 0}, 1000, function() {
          $active.removeClass('active');
          });
  
  $indicator.animate({opacity: 0.2}, 1000, function() {
          $indicator.removeClass('active');
          });
  
  $next.css({opacity: 0})
       .addClass('active')
       .animate({opacity: 1}, 1000, function() {
          });
  
  }
  
  
  var start = setInterval(function() {
  slideSwitch();
  }, 4000 );
  
  
  
  $('.bannerindicator:nth-of-type(1)').click(function (){
  
  var $one = $('.bannercontainer IMG:nth-of-type(1)');
  var $onei = $('.bannerindicator:nth-of-type(1)');
  var $active = $('.bannercontainer IMG.active');
  var $indicator = $('.bannerindicator.active');
  
  if($onei.hasClass('active')) {
  } else {
  
  clearInterval(start);
  
  $indicator.animate({opacity: 0.2}, 1000, function() {
           $indicator.removeClass('active');
          });
  
  $active.animate({opacity: 0}, 1000, function() {
          $active.removeClass('active');
          });
  
  $onei.addClass('active'), 10, function() {
      $onei.animate({opacity: 1}, 1000
      )};
  
  $one.css({opacity: 0})
       .addClass('active')
       .animate({opacity: 1}, 1000, function() {
          }); 
      }   
  });
  
  
  $('.bannerindicator:nth-of-type(2)').click(function (){
  
  var $two = $('.bannercontainer IMG:nth-of-type(2)');
  var $twoi = $('.bannerindicator:nth-of-type(2)');
  var $active = $('.bannercontainer IMG.active');
  var $indicator = $('.bannerindicator.active');
  
  if($twoi.hasClass('active')) {
  } else {
  
  clearInterval(start);
  
  $indicator.animate({opacity: 0.2}, 1000, function() {
           $indicator.removeClass('active');
          });
  
  $active.animate({opacity: 0}, 1000, function() {
          $active.removeClass('active');
          });
  
  $twoi.addClass('active'), 10, function() {
      $twoi.animate({opacity: 1}, 1000
      )};
  
  $two.css({opacity: 0})
       .addClass('active')
       .animate({opacity: 1}, 1000, function() {
          }); 
      }   
  });
  
  
  $('.bannerindicator:nth-of-type(3)').click(function (){
  
  var $three = $('.bannercontainer IMG:nth-of-type(3)');
  var $threei = $('.bannerindicator:nth-of-type(3)');
  var $active = $('.bannercontainer IMG.active');
  var $indicator = $('.bannerindicator.active');
  
  if($threei.hasClass('active')) {
  } else {
  
  clearInterval(start);
  
  $indicator.animate({opacity: 0.2}, 1000, function() {
           $indicator.removeClass('active');
          });
  
  $active.animate({opacity: 0}, 1000, function() {
          $active.removeClass('active');
          });
  
  $threei.addClass('active'), 10, function() {
      $threei.animate({opacity: 1}, 1000
      )}; 
  
  $three.css({opacity: 0})
       .addClass('active')
       .animate({opacity: 1}, 1000, function() {
          }); 
      }
  });
  </code></pre>
  
  <p>I've made a JSFiddle (no images, images work fine anyway): </p>
  
  <p><a href="https://jsfiddle.net/zh1mykzp/" rel="nofollow">https://jsfiddle.net/zh1mykzp/</a></p>
  
  <p>I'd be very appreciative if anyone would take a quick look at this code. I'm still quite a beginner so I'm sure the solution is quite obvious..</p>
  
  <p>Thanks in advance.</p>