title: jQuery navigation slides
body: <p>I have a <code>div</code> slider that works fine, but I want a navigation that indicates the current active slide and if you click on a link it shows the slide that you clicked on. My problem is, whenever I click on a link from the nav my page becomes unresponsive and i need to close the tab and reopen the website.I tried it in many browser and it does the same thing. Something went wrong when I added the "navSlides" on click event.Can someone explain me what i need to do to make it work ? Thanks !  </p>
  
  <p>Here is my <a href="http://jsfiddle.net/fm95wc4k/1/" rel="nofollow">JSFIDDLE</a></p>
  
  <pre><code> contentSlides = $('.slide-wrapper');
      navSlides = $('#slide-nav &gt; ul &gt; li &gt; a');
      slidesLeng = contentSlides.length - 1;
      index = 0;
  
      for (i = 0; i &lt;= slidesLeng; i++) {
          $(contentSlides[i]).addClass('slide-' + i);
          $(navSlides[i]).addClass('slide-' + i);
      }    
  
      $('div.slide-wrapper &gt; span').on('mouseover', function () {
          $(this).css({ 'font-size': '40px' });
      });
  
      $('div.slide-wrapper &gt; span').on('mouseout', function () {
          $(this).css({ 'font-size': '50px' });
      });
  
  
      $('.next').on('click', function () {
          if (index != slidesLeng) {
              $(contentSlides[index]).fadeOut(400, function () {
                  $(this).removeClass('active');
                  $(navSlides[index]).removeClass('active');
                  index++;
                  $(contentSlides[index]).fadeIn(400).addClass('active');
                  $(navSlides[index]).addClass('active');
              });
          }
      });
  
      $('.prev').on('click', function () {
          if (index != 0) {
              $(contentSlides[index]).fadeOut(400, function () {
                  $(this).removeClass('active');
                  $(navSlides[index]).removeClass('active');
                  index--;
                  $(contentSlides[index]).fadeIn(400).addClass('active');
                  $(navSlides[index]).addClass('active');
              });
          }
      });
  
      $(navSlides).on('click', function () {
          var slideClass = $(this).attr('class');
  
          $(contentSlides[index]).fadeOut(400, function () {
              $(this).removeClass('active'); 
              index = 0;
              while (slideClass != $(contentSlides[index]).attr('class') || index&lt;=slidesLeng) {
                  index++;
              }
              contentSlides[index].fadeIn(400).addClass('active');
          });    
      });
  </code></pre>