如何使中間項目的滑塊比其他項目大？

Question

我想實現與圖片所示相同的滑塊。我的中間項目總是比其他項目更大。我需要爲活動幻燈片和放置在兩側的幻燈片使用不同尺寸的圖像。所以我覺得，如代碼使用方法：

li { 
 
    width: $small-item-width; 
 
    height: $small-item-height; 
 
    &.active { 
 
    width: $big-item-width; 
 
    height: $big-item-height; 
 
    } 
 
    position: relative; 
 
    .item { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    } 
 
}

<ul> 
 
<li> 
 
<div class="big-item"></div> 
 
<div class="small-item"></div> 
 
</li> 
 
<li class="active"> 
 
<div class="item big"></div> 
 
<div class="item small"></div> 
 
</li> 
 
</ul>

，我發現在互聯網上唯一的解決辦法是用Slick Slider中心模式。但是這裏使用的標記不適合我的情況，'只有一個孩子可以滑動。

<div class="your-class"> 
    <div>your content</div> 
    <div>your content</div> 
    <div>your content</div> 
</div> 

所以我想使用任何插件，並添加類「主動」李則幻燈片處於活動狀態。任何人都可以知道如何做到這一點？

Answer 1

&.active { 
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
    transform: scale(1.2); 
}