如何制作中间项目的滑块比其他项目更大？

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>

所以我想使用任何插件并将类“active”添加到li，然后幻灯片处于活动状态。谁能知道怎么做？

Answer 1

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