JSFiddle - React, Tailwind, and code Playground

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">
<!-- Standard carousel where Slick calculated the best widths to fit. -->
<div class="container ">
    <div class="row ">
        <div id="carousel" class="carousel col-md-12 ">
            <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 class="item ten"></div>

        </div>
          <div class="triangle"></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>

    </ul>
    </div>    
</div>

<!-- But I want a 20px gap between slides. Hmm this doesn't work at all. -->
<div class="container">

CSS

.slick-prev:before, .slick-next:before { color: black; }

.container{padding-top:50px;}
.client-text li {left:0;right:0;margin:auto;list-style:none;margin:50px;z-index:9999;color:black;}

.item{ height: 200px;}
.one {background-image: url("http://placehold.it/200&text=1"); }
.two {background-image: url("http://placehold.it/200&text=2"); }
.three {background-image: url("http://placehold.it/200&text=3"); }
.four {background-image: url("http://placehold.it/200&text=4"); }
.five {background-image: url("http://placehold.it/200&text=5"); }
.six {background-image: url("http://placehold.it/200&text=6"); }
.seven {background-image: url("http://placehold.it/200&text=7"); }
.eight {background-image: url("http://placehold.it/200&text=8"); }
.nine {background-image: url("http://placehold.it/200&text=9"); }
.ten {background-image: url("http://placehold.it/200&text=10"); }
.slick-slide{
  width:130px;
margin-right: 15px;
margin-left: 15px;
}


.triangle{left:0;right:0;margin:auto;width:0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #333333 transparent transparent transparent;
}

JavaScript

$('#carousel').slick({
    arrows: true,
    slidesToShow: 3,
    autoplay: true,
    autoplaySpeed:2500,
    speed: 500,
    variableWidth: 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();