Javascript 如何创建中心元素更宽的旋转木马？

我需要按照以下设计结构建造旋转木马：

我尝试了多个库：react slick、owl slider、brainhubeu的react carousel和tiny slider。它们似乎都是为固定宽度的卡片/滑块设计的。更改当前活动滑块的尺寸后

---

你在哪里见过类似的东西吗？欢迎任何示例或想法（最好是React.js解决方案）。

请使用slick查看此示例

我可以稍微调整一下，让它看起来和你描述的非常相似

$('.slider').slick({
  centerMode: true,
  slidesToShow: 3,
  centerPadding: "15%",
  speed: 500
});

使用插件。您可以很容易地使用它，并且可以使用npm进行安装。创建滑块后，只需为带有活动类的owl项提供所需的样式。我已经为您创建了主要的css和HTML结构。只需将所需的依赖项添加到react项目并使用它

$（'.owl carousel'）.owlCarousel({
循环：对，
差额：10，
自动宽度：正确，
中：是的，
导航：错，
自动播放：对，
自动播放超时：3000，
自动播放暂停：对，
回答：是的，
响应：{
0:{
项目：1
},
600:{
项目：4
},
1000:{
项目：5
}
}
})

正文{
方向：ltr
}
.猫头鹰旋转木马.猫头鹰舞台{
显示器：flex；
证明内容：中心；
对齐项目：柔性端；
}
.猫头鹰转盘.猫头鹰物品.物品{
宽度：120px；
最小高度：120px；
背景颜色：浅蓝色；
}
.owl carousel.owl-item.active.center.item{
宽度：160px；
高度：200px；
背景颜色：粉红色；
}

.猫头鹰主题.猫头鹰点.猫头鹰点跨度{
背景：#fff；
边框：1px实心#A5A5；
}
.owl主题。owl点。owl点。活动范围，
.猫头鹰主题.猫头鹰点.猫头鹰点：悬停范围{
背景#a5a5；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

幻灯片元素的大小是相等的。我尝试了适应这种技术-甚至无法接近设计。非常感谢！我现在就尝试实施它。