JSFiddle - React, Tailwind, and code Playground

by basiclaser

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css">
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script>
<script src="https://vmcdn.de/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://vmcdn.de/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container ">
    <div class="row ">
        
        <div id="carousel" class="col-md-12 ">
            <div class="item zero"></div>
            <div class="item one"></div>
            <div class="item two"></div>
            <div class="item three"></div>
            <div class="item four"></div>
            <div class="item five"></div>
            <div class="item six"></div>
            <div class="item seven"></div>
            <div class="item eight"></div>
            <div class="item nine"></div>
        </div>
        
        <p class="current"></p>
      <ul class="client-text">
          <li>0 lorem ipsum</li>
          <li>1 lorem ipsum</li>
          <li>2 lorem ipsum</li>
          <li>3 lorem ipsum</li>
          <li>4 lorem ipsum</li>
          <li>5 lorem ipsum</li>
          <li>6 lorem ipsum</li>
          <li>7 lorem ipsum</li>
          <li>8 lorem ipsum</li>
          <li>9 lorem ipsum</li>
      </ul>
    
    </div>    
</div>

CSS

.slick-prev:before, .slick-next:before { color: black; }
.item{height:120px;         background-repeat: no-repeat;
}
.client-text li {left:0; right:0; margin:auto; list-style:none; margin:50px; z-index:9999; color:black;}

.zero{background-image: url("http://placehold.it/120x200&text=00");}
.one{background-image: url("http://placehold.it/120x200&text=01");}
.two{background-image: url("http://placehold.it/120x200&text=02");}
.three{background-image: url("http://placehold.it/120x200&text=03");}
.four{background-image: url("http://placehold.it/120x200&text=04");}
.five{background-image: url("http://placehold.it/120x200&text=05");}
.six{background-image: url("http://placehold.it/120x200&text=06");}
.seven{background-image: url("http://placehold.it/120x200&text=07");}
.eight{background-image: url("http://placehold.it/120x200&text=08");}
.nine{background-image: url("http://placehold.it/120x200&text=09");}

JavaScript

$('#carousel').slick({
    arrows: true,
    centerMode: true,
    slidesToShow: 3,
    autoplay: true,
    autoplaySpeed: 4500,
    speed: 500,
    variableWidth: true,
    infinite: true,
    focusOnSelect: true,
    onAfterChange: function(){ 
          var cat = ($('#carousel').slickCurrentSlide()) + 1;
          $('.client-text > li').hide();
          $('.client-text > li:nth-child('+ cat +')').show();
    }
});

  $('.client-text > li').hide();
  $('.client-text > li:first-child').show();