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

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 居中模式。但是这里使用的标记不适合我的情况，因为只有一个 child 可以滑动。

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

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

Answer 1

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

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

How to make a slider with the middle item is bigger than others?

javascript

jquery

slider