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

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>

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

Answer 1

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