title: Slik Slider- Creating `center` slider
body: <p>I want to use <code>Slik Slider</code> for creating a center slider. But using Slik Slider I faced a problem and it doesn't work correctly. Actually the center item is not highlighted. My codes and my <code>JSFiddle</code> are following. How can I fix that?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id=costumers&gt;
        &lt;div id="listSlider-right-icon"&gt;
              &lt;i id="listSlider-right-arrow" class="fa fa-2x fa-square color-green"&gt;
                  &lt;i class="play-icon fa fa-play color-white"&gt;&lt;/i&gt;
              &lt;/i&gt;
          &lt;/div&gt;
        &lt;div id="listSlider"&gt;
              &lt;div class="costumers_box"&gt;
                &lt;h3&gt;
                1
                &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="costumers_box"&gt;
                &lt;h3&gt;
                2
                &lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;div class="costumers_box"&gt;
                &lt;h3&gt;
                3
                &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="costumers_box"&gt;
                &lt;h3&gt;
                4
                &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="costumers_box"&gt;
                &lt;h3&gt;
                5
                &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="costumers_box"&gt;
                &lt;h3&gt;
                6
                &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="costumers_box"&gt;
                &lt;h3&gt;
                7
                &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="costumers_box"&gt;
                &lt;h3&gt;
                8
                &lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="listSlider-left-icon"&gt;
              &lt;i id="listSlider-left-arrow" class="fa fa-2x fa-square color-green"&gt;
                  &lt;i class="play-icon fa fa-play color-white"&gt;&lt;/i&gt;
              &lt;/i&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#listSlider{
      display: flex;
      justify-content: space-around;
      width: 70%;
      margin-top: 110px;
  }
  .costumers_box{
      background-color: #333333;
      width: 160px;
      height: 110px;
      border-radius: 5px;
      margin-left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .costumers_box h3{
      color: white;
  }
  #costumers{
      width: 100%;
      height: 250px;
      background-color: #383838;
      margin-bottom: 30px;
      position: relative;
      display: flex;
      justify-content: center;
  }
  #listSlider-left-icon, #listSlider-right-icon{
      position: absolute;
      margin-top: 150px;
      cursor: pointer;
  }
  #listSlider-right-icon{
      right: 10%;
  }
  #listSlider-left-icon{
      left: 10%;
  }
  
  #listSlider-left-arrow i, #listSlider-right-arrow i{
      font-size: 12px;
      position: absolute;
      left: 50%;
      top: 0.6em;
      margin-left: -7px;
  }
  #listSlider-left-arrow i{
       transform: rotate(180deg);
  }
  #listSlider-right-arrow i{
      margin-left: -5px;
      top: 0.7em;
  }
  .color-white{
      color: white;
  }
  .color-green{
      color: #01a89e;
  }
  </code></pre>
  
  <p>and here is my <a href="https://jsfiddle.net/s9su30qp/2/" rel="nofollow noreferrer">JSFiddle</a></p>