Slik滑塊 - 創建`center`滑塊

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

，這裏是我的JSFiddle

Answer 1

我不知道你怎麼想突出它，但你可以使用這個CSS選擇器並添加任何你想要的（我添加了一個黃色的背景色和一個紅色的邊框）：

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