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

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>  

我在 Internet 上找到的唯一解决方案是带有中心模式的 Slick Slider。但是这里使用的标记不适合我的情况，因为只有一个孩子可以滑动。

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

所以我想使用任何插件并将类“活动”添加到 li 然后幻灯片是活动的。有人知道怎么做吗？

Answer 1

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