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

我想实现与图中所示相同的滑块。我的中间项总是比其他项大。我需要为活动幻灯片和放置在侧面的幻灯片使用不同大小的图像。因此，我认为使用以下代码：

li{
宽度：$小项目宽度；
高度：$小物件高度；
&.主动{
宽度：$大项目宽度；
高度：$大项目高度；
}
位置：相对位置；
.项目{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
}

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