title: JQuery slider next and prev buttons only work when click spamming them
body: <p>So I'm making a custom jquery slider where you can browse through content sliders by using next and prev buttons (classes next and prev in the DOM). For some reason the results I am getting are quite random, only changing from slide to slide after spamming the prev button,  I console log the results so that you can see the visible index.</p>
  
  <p>Here is my code:</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>$(document).ready(function(){
   
   var sliders = $('.slider');
   
   var show_index = 0;
   
   $('.slider').eq(show_index).addClass('active_slider');
   console.log(show_index);
   console.log(sliders.length);
   
   
   $('.prev').click(function(){
    
    console.log('clicked prev');
    
    if(show_index == 0){
     
     
     $('.slider').eq(show_index).removeClass('active_slider'); 
        $('.slider').eq(show_index-1).addClass('active_slider'); 
     console.log(show_index);
    }
    
    else{
     
     $('.slider').eq(show_index).removeClass('active_slider'); 
        $('.slider').eq(show_index--).addClass('active_slider');
              console.log(show_index);   
    }
      });
   
   
   
   $('.next').click(function(){
    
    console.log('clicked next');
    
    if(show_index == sliders.length){
     
     
     $('.slider').eq(show_index).removeClass('active_slider'); 
        $('.slider').eq(0).addClass('active_slider'); 
     console.log(show_index);
    }
    
    else{
     
     
     $('.slider').eq(show_index).removeClass('active_slider'); 
        $('.slider').eq(show_index++).addClass('active_slider');
              console.log(show_index);   
    }
      });
   
   
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*GRAN SLIDER START*/
  .gran_slider_maincontainer{width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden;}
  .gran_slider_big_container{width:100%; position:relative; height:90vh; overflow:hidden;}
  .prev{cursor:pointer; position:absolute; left:20px; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
  .next{cursor:pointer; position:absolute; right:20px; z-index:9999999999999999999999999999;  top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
  .gran_slider_big_navegation_container{width:auto; height:30px; display:flex; align-items:center; position:absolute; bottom:25px; right:50px; z-index:10000;}
  .gran_slider_big_navegation_dot{width:15px; height:15px; background-color:rgba(255,255,255,0.4); margin:0px 3px; border-radius:50%;}
  .gran_slider_big_item_container{display:none; width:100%; height:100%; position:relative; overflow:hidden;}
  .gran_slider_big_item_gradient_overlay{width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,0.3); position:absolute; top:0px; left:0px;}
  .gran_slider_big_item_image{width:100%; height:100%; z-index:2; background-position:center; background-size:cover;}
  .gran_slider_big_item_texts_container{width:55%; height:auto; display:flex; flex-direction:column; padding:10px;}
  .gran_slider_big_item_texts_title{font-size:45px; color:white; font-weight:600; margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
  .gran_slider_big_item_texts_description{font-size:30px; color:white; font-weight:600 margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
  .gran_slider_small_container{width:100%; height:10vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));}
  .active_slider{display:flex;}
  /*GRAN SLIDER END*/
  
  .from_right_to_bottom {
    position: absolute;
    right: 120px;
    opacity: 0;
    animation-name: from_right_to_bottom;
    animation-delay: 1500ms;
    animation-duration: 6s;
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-iteration-count: 1;
    z-index:9999;
    text-align:right;
  }
  
  @keyframes from_right_to_bottom {
   
    0% {top: -200px; opacity: 0;}
  
    100% {top: 250px; opacity: 1;}
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;div class="gran_slider_maincontainer" style=""&gt;
      &lt;div class="gran_slider_big_container" style=" "&gt;
       &lt;i class="prev fa fa-chevron-left" style=""&gt;&lt;/i&gt;
    &lt;i class="next fa fa-chevron-right" style=""&gt;&lt;/i&gt;
    &lt;!--
          &lt;div class="gran_slider_big_navegation_container" style=" "&gt;
           &lt;a class="gran_slider_big_navegation_dot" href="" style=""&gt;&lt;/a&gt;
        &lt;a class="gran_slider_big_navegation_dot" href="" style=""&gt;&lt;/a&gt;
        &lt;a class="gran_slider_big_navegation_dot" href="" style=""&gt;&lt;/a&gt;
       &lt;/div&gt;
    --&gt;
       &lt;div class="gran_slider_big_item_container slider" style=""&gt;
           &lt;div class="gran_slider_big_item_gradient_overlay" style=""&gt;&lt;/div&gt;
           &lt;div class="gran_slider_big_item_image move" style="background-color:blue;"&gt;&lt;/div&gt;
           &lt;div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" "&gt;
         &lt;span class="gran_slider_big_item_texts_title" style=""&gt;Titulo&lt;/span&gt;
      &lt;span class="gran_slider_big_item_texts_description" style=""&gt;Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.&lt;/span&gt;
     &lt;/div&gt;
       &lt;/div&gt;
    &lt;div class="gran_slider_big_item_container slider" style=""&gt;
           &lt;div class="gran_slider_big_item_gradient_overlay" style=""&gt;&lt;/div&gt;
           &lt;div class="gran_slider_big_item_image move" style="background-color:red;"&gt;&lt;/div&gt;
           &lt;div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" "&gt;
         &lt;span class="gran_slider_big_item_texts_title" style=""&gt;Titulo&lt;/span&gt;
      &lt;span class="gran_slider_big_item_texts_description" style=""&gt;Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.&lt;/span&gt;
     &lt;/div&gt;
       &lt;/div&gt;
    &lt;div class="gran_slider_big_item_container slider" style=""&gt;
           &lt;div class="gran_slider_big_item_gradient_overlay" style=""&gt;&lt;/div&gt;
           &lt;div class="gran_slider_big_item_image move" style="background-color:green;"&gt;&lt;/div&gt;
           &lt;div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" "&gt;
         &lt;span class="gran_slider_big_item_texts_title" style=""&gt;Titulo&lt;/span&gt;
      &lt;span class="gran_slider_big_item_texts_description" style=""&gt;Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.&lt;/span&gt;
     &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="gran_slider_small_container" style=""&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>