如何使中间项目的滑块比其他项目大？

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