スライクスライダ - 「中央」スライダの作成

Question

センタースライダの作成にSlik Sliderを使用します。しかしSlik Sliderを使うと問題に直面して正しく動作しません。実際には、中央の項目は強調表示されません。私のコードと私のJSFiddleは以下の通りです。どうすれば修正できますか？

HTML：

<div id=costumers> 
     <div id="listSlider-right-icon"> 
      <i id="listSlider-right-arrow" class="fa fa-2x fa-square color-green"> 
       <i class="play-icon fa fa-play color-white"></i> 
      </i> 
     </div> 
     <div id="listSlider"> 
      <div class="costumers_box"> 
       <h3> 
       1 
       </h3> 
      </div> 
      <div class="costumers_box"> 
       <h3> 
       2 
       </h3> 
      </div> 

      <div class="costumers_box"> 
       <h3> 
       3 
       </h3> 
      </div> 
      <div class="costumers_box"> 
       <h3> 
       4 
       </h3> 
      </div> 
      <div class="costumers_box"> 
       <h3> 
       5 
       </h3> 
      </div> 
      <div class="costumers_box"> 
       <h3> 
       6 
       </h3> 
      </div> 
      <div class="costumers_box"> 
       <h3> 
       7 
       </h3> 
      </div> 
      <div class="costumers_box"> 
       <h3> 
       8 
       </h3> 
      </div> 
     </div> 
     <div id="listSlider-left-icon"> 
      <i id="listSlider-left-arrow" class="fa fa-2x fa-square color-green"> 
       <i class="play-icon fa fa-play color-white"></i> 
      </i> 
     </div> 
     </div> 

CSS：

#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; 
} 

、ここでは、私はあなたがそれを強調したいのか分からないが、あなたはこのCSSセレクタを使用することができ、私のJSFiddle

Answer 1

です必要なものを追加します（黄色の背景色と赤い枠線を追加しました）。

.slick-center { 
    background: yellow; 
    border: 5px solid red; 
} 

ここでフィドルです：https://jsfiddle.net/mam1h3Lk/2/

問題が解決しない場合、あなたはCSSセレクタは、より具体的にする必要があります：

div.costumers_box.slick-slide.slick-current.slick-active.slick-center {  
    background: yellow; 
    border: 5px solid red; 
}