JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<div class="client-controls">
                <div class="client-control-next"><img src="/img/clients/next.svg" alt=""></div>
                <div class="client-control-prev"><img src="/img/clients/prev.svg" alt=""></div>
            </div>

            <div class="clients-belt">

                <div class="client-unit">

                    <div class="client-face">
                        <img src="img/clients/client1.jpg" alt="client-face">
                        <strong class="client-name">Denn Summer</strong>
                        <em class="client-title">Director of Programmer</em>
                    </div>

                    <div class="client-content">
                        <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
                        <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
                    </div>

                </div>

            </div>

            <div class="clients-belt">

                <div class="client-unit">

                    <div class="client-face">
                        <img src="img/clients/client2.jpg" alt="client-face">
                        <strong class="client-name">Sott Spring</strong>
                        <em class="client-title">Director of Designer</em>
                    </div>

                    <div class="client-content">
                        <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
                        <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec...

CSS

#clients {
      position: relative;
    }

    .clients-belt {
      width: 100%;
      position: relative;
    }

    .clients-belt .client-unit {
      max-width: 750px;
      margin: 0 0 50px -375px;
      position: absolute;
      top: 0px;
      left: 50%;
      z-index: 1;
      display: none;
    }

    .clients-belt .client-unit.active-client {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
    }

    .clients-belt .client-unit .client-face {
      min-width: 300px;
      text-align: center;
    }

    .clients-belt .client-unit .client-face img {
      max-width: 100px;
      border-radius: 50%;
    }

    .clients-belt .client-unit .client-face .client-name {
      display: block;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 1px;
    }

    .clients-belt .client-unit .client-face .client-title {
      font-size: 12px;
      font-style: normal;
      color: #999;
    }

    .clients-belt .client-unit .client-content {
      font-size: 18px;
      line-height: 36px;
      font-weight: 300;
      margin-top: -10px;
      position: relative;
    }

.client-controls {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.client-controls > div {
  height: 40px;
  width: 40px;
  cursor: pointer;
}

.client-controls .client-control-next {
  position: absolute;
  top: 50%;
  right: 10px;
}

.client-controls .client-control-prev {
  position: absolute;
  top: 50%;
  left: 10px;
}

JavaScript

$( document ).ready(function() {
console.log(clientSection);
      clientSection();

    });

    function clientSection(){
				
        $('.client-unit').first().addClass('active-client');



        $('.client-control-next, .client-control-prev').click(function() {

            var $this = $(this),
                curActiveClient = $('.clients-belt').find('.active-client'),
                position = $('.clients-belt').children().index(curActiveClient),
                clientNum = $('.client-unit').length;

                if ($this.hasClass('client-control-next')) {
                    if (position < clientNum -1) {
                        $('.active-client').removeClass('active-client').parent().next().find(".client-unit").addClass('active-client');
                    } else {
                        $('.client-unit').removeClass('active-client').first().addClass('active-client');
                    }

                } else {
                  
                    if (position === 0) {
                        $('.client-unit').removeClass('active-client').last().addClass('active-client');
                    } else {

                        $('.active-client').removeClass('active-client').parent().prev().find(".client-unit").addClass('active-client');
                    }

                }



        });


    }