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 ">
    <p class="current"></p>
      <ul class="client-text">
          <li>0 lorem ipsum</li>
          <li>1 lorem ipsum</li>
          <li>2 lorem ipsum</li>
          
      </ul>
    <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>
        
        <p class="current"></p>
      <ul class="client-text">
          <li>0 lorem ipsum</li>
          <li>1 lorem ipsum</li>
          <li>2 lorem ipsum</li>
          
      </ul>
    
    </div>    
</div>

CSS

.slick-prev:before, .slick-next:before { color: black; }
.item{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/200&text=00");}
.one{background-image: url("http://placehold.it/200&text=01");}
.two{background-image: url("http://placehold.it/200&text=02");}

JavaScript

$('#carousel').slick({
    arrows: true,
    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();