Aleksandr Karev Aleksandr Karev - 4 months ago 10
CSS Question

How to create a simple client testimonial carousel using jQuery

I am trying to learn how to create a very simply client testimonial carousel using jQuery.

This is how my client testimonial section looks like:

Custom Client Testimonials Block

Here is my HTML code for this section:

<!-- TESTIMONIALS SECTION -->

<div class="container">
<div class="row">

<div class="col-xs-12">
<div class="indent-top">
<h2 class="space-after">Отзывы<br> от наших клиентов</h2>
</div>
</div>

<div class="col-xs-12 text-center">

<div id="client-1" class="sss">
<img class="testimonial-photo" src="assets/img/testimonials/clients/client-1.jpg">
<h3 class="client-name">Евгений Карев</h3>
<p class="client-description space-after">Генеральный директор,<br><strong>SIA INTERGAZ</strong></p>
<div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 space-after">
<p>“Сотрудничеством доволен, нареканий нет. Ни разу не нарушили сроков. Очень рад, что сами занимаются оформлением документов, так что мне не приходится в это лезть.”</p>
</div>
</div>

<div id="client-2" class="hide">
<img class="testimonial-photo" src="assets/img/testimonials/clients/client-2.jpg">
<h3 class="client-name">Александр Карев</h3>
<p class="client-description space-after">Директор по Маркетингу,<br><strong>SIA INTERGAZ</strong></p>
<div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 space-after">
<p>“Сотрудничеством доволен, нареканий нет. Ни разу не нарушили сроков. Очень рад, что сами занимаются оформлением документов, так что мне не приходится в это лезть.”</p>
</div>
</div>

<div id="client-3" class="hide">
<img class="testimonial-photo" src="assets/img/testimonials/clients/client-3.jpg">
<h3 class="client-name">Иварс Викелис</h3>
<p class="client-description space-after">Финансовый директор,<br><strong>SIA INTERGAZ</strong></p>
<div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 space-after">
<p>“Сотрудничеством доволен, нареканий нет. Ни разу не нарушили сроков. Очень рад, что сами занимаются оформлением документов, так что мне не приходится в это лезть.”</p>
</div>
</div>

<div id="client-4" class="hide">
<img class="testimonial-photo" src="assets/img/testimonials/clients/client-1.jpg">
<h3 class="client-name">Сергей Кривошеев</h3>
<p class="client-description space-after">Директор по ИТ,<br><strong>SIA INTERGAZ</strong></p>
<div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 space-after">
<p>“Сотрудничеством доволен, нареканий нет. Ни разу не нарушили сроков. Очень рад, что сами занимаются оформлением документов, так что мне не приходится в это лезть.”</p>
</div>
</div>

<div class="col-xs-8 col-xs-offset-2 text-center indent-bottom">
<ul>
<li id="client-1-selector" class="client-selector active-client"></li>
<li id="client-2-selector" class="client-selector"></li>
<li id="client-3-selector" class="client-selector"></li>
<li id="client-3-selector" class="client-selector"></li>
</ul>
</div>
</div>

</div>
</div>


So basically I have four different testimonials, where three of them are hidden using Bootstrap .hide class and the first testimonial is unhidden. Below these testimonials I have four client selectors (round dots), which when pressed should trigger a script with the following logic:


  1. When ".client-2" (round dot selector below testimonial) is pressed, the script should automatically remove ".hide" class from the #client-2 (second testimonial) and give all the other testimonials a class of ".hide" to hide them from the user. Thus, as far as I understand the script should check whether a certain testimonial already has a ".hide" class and if it does not than add this class to the given testimonial.



One thing to mention here is that I am not a very experienced user in JavaScript and jQuery (just yet), but this is as far as I got with this script:

$("body").on("click", "#client-2-selector", function(){
$("#client-1").addClass('hide');
$("#client-2").removeClass('hide');
$("#client-1-selector").removeClass("active-client");
$("#client-2-selector").addClass("active-client");
});


This script sort of works: http://d.pr/i/1hXN (this is a .gif file showing how it works now).

I understand that there should be a much better way of achieving the same result for all four client testimonial selectors because if I will use my method than I will need to add a lot of identical code, which is not DRY... Therefore, I would be highly grateful if someone could help me out with this script or give me some sort of suggestion on how I could improve it.

P.S I know that there are different plugins for achieving the desired effect, such as: http://flickity.metafizzy.co/ , but as a beginner I would like to practice my skills, thus I decided to do everything myself to get some deeper understanding of how things actually work.

Thank you very much in advance.

Answer

try something like this:

$("body").on("click", ".client-selector", function(){
    var index = $(this).index();
    $("[id^='client-']:not(.client-selector)").addClass('hide');
    $("#client-"+(index+1)).removeClass('hide');
    $(".client-selector").removeClass("active-client");
    $(this).addClass("active-client");
});

https://jsfiddle.net/nueL8utm/

Comments