矢印コントロールアイコンをすばやくクリックすると、このjQueryスライダが消えるのはなぜですか？

Question

私はこのjqueryスライダーで狂った問題を抱えています。私はゆっくりと矢印のコントロールをクリックし、それは非常によく

に動作しますが、私は矢印コントロールのいずれかをクリックすると、すぐに全体のdivセクションが消えたが、それはまだソースコードに存在する場合

あなたは私を助けることができますこの問題はどうですか？

完全なコードダウンここに：

// Check testimonials 
 
var leftArrow = $('.testimonials .fa-chevron-left'), 
 
    rightArrow = $('.testimonials .fa-chevron-right'); 
 

 
function checkClients() { 
 
    if ($('.client:first').hasClass('active')) { 
 
    leftArrow.fadeOut(); 
 
    } else { 
 
    leftArrow.fadeIn(); 
 
    } 
 
    if ($('.client:last').hasClass('active')) { 
 
    rightArrow.fadeOut(); 
 
    } else { 
 
    rightArrow.fadeIn(); 
 
    } 
 
} 
 

 
checkClients(); 
 

 
$('.testimonials i').click(function() { 
 
    if ($(this).hasClass('fa-chevron-right')) { 
 
    $('.testimonials .active').fadeOut(400, function() { 
 
     $(this).removeClass('active').next('.client').addClass('active').fadeIn(); 
 
     checkClients(); 
 
    }); 
 
    } else { 
 
    $('.testimonials .active').fadeOut(400, function() { 
 
     $(this).removeClass('active').prev('.client').addClass('active').fadeIn(); 
 
     checkClients(); 
 
    }); 
 
    } 
 
});

.testimonials { 
 
    background: url('../images/testimonials.jpg'); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
} 
 
.testimonials .client { 
 
    padding: 50px 0; 
 
    color: #FFF; 
 
    font-size: 20px; 
 
} 
 
.testimonials .client img { 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.testimonials .client p { 
 
    line-height: 2; 
 
    font-style: italic; 
 
} 
 
.testimonials .fa-chevron-right, 
 
.testimonials .fa-chevron-left { 
 
    position: absolute; 
 
    top: 50%; 
 
    color: #FFF; 
 
    cursor: pointer; 
 
    -webkit-transition: all .3s ease-in-out; 
 
    -moz-transition: all .3s ease-in-out; 
 
    -o-transition: all .3s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
} 
 
.testimonials .fa-chevron-right:hover, 
 
.testimonials .fa-chevron-left:hover { 
 
    color: #f7600e; 
 
} 
 
.testimonials .fa-chevron-right { 
 
    right: 0; 
 
} 
 
.testimonials .fa-chevron-left { 
 
    left: 0; 
 
}

<div class="testimonials text-center"> 
 
    <div class="overlay"> 
 
    <div class="container"> 
 
     <div class="client active"> 
 
     <img src="images/client.jpg" alt=""> 
 
     <p> 
 
      These guys are incredible! I get my project in 10 days and it was awesome! 
 
      <br>Very good service! Highly recommended! 
 
     </p> 
 
     <span>John Smith</span> 
 
     </div> 
 
     <div class="client hidden"> 
 
     <img src="images/client.jpg" alt=""> 
 
     <p> 
 
      These guys are incredible! I get my project in 10 days and it was awesome! 
 
      <br>Very good service! Highly recommended! 
 
     </p> 
 
     <span>Wael Assaf</span> 
 
     </div> 
 
     <div class="client hidden"> 
 
     <img src="images/client.jpg" alt=""> 
 
     <p> 
 
      These guys are incredible! I get my project in 10 days and it was awesome! 
 
      <br>Very good service! Highly recommended! 
 
     </p> 
 
     <span>Sofya Bedal</span> 
 
     </div> 
 
     <div class="client hidden"> 
 
     <img src="images/client.jpg" alt=""> 
 
     <p> 
 
      These guys are incredible! I get my project in 10 days and it was awesome! 
 
      <br>Very good service! Highly recommended! 
 
     </p> 
 
     <span>Tata</span> 
 
     </div> 
 

 
     <i class="fa fa-chevron-right fa-2x"></i> 
 
     <i class="fa fa-chevron-left fa-2x"></i> 
 
    </div> 
 
    </div> 
 
</div>

みんなありがとう！

Answer 1

}}}}そこに問題が発生している可能性があります。

$('.testimonials i').click(function() { 


if ($(this).hasClass('fa-chevron-right')) { 
    $('.testimonials .active').fadeOut(400, function() { 
     $(this).removeClass('active').next('.client').addClass('active').fadeIn(); 
     checkClients(); 
    }); 
    } else { 
    $('.testimonials .active').fadeOut(400, function() { 
     $(this).removeClass('active').prev('.client').addClass('active').fadeIn(); 
     checkClients(); 
    }); 
    } 
});