Javascript 猫头鹰转盘上的重叠幻灯片

我正在制作这个滑块，其设计如下：

到目前为止，我已经尝试使用负边距和翻译来使用CSS获得这种效果

有人知道我如何使用猫头鹰旋转木马获得这种效果吗

我的代码如下：

$（'.owl carousel'）.owlCarousel({
中：是的，
循环：对，
保证金：0，
响应：{
320: {
项目：1，
分期付款：70
},
600: {
项目：4
}
}
});
.carousel container.owl-item.center.container img{
不透明度：1；
填充：0；
}
.carousel容器.owl-item.center.Continental文本容器{
不透明度：1；
}
.carousel container.owl-item.center.Continental文本容器h2{
颜色：#2B8088；
字号：1.625rem；
字体系列：“议程”；
}
.旋转木马容器.猫头鹰物品.大陆img容器img{
不透明度：0.5；
边界半径：100px；
}
.carousel容器.owl项.大陆文本容器{
不透明度：0；
}

非洲
（阿根廷、巴西、哥伦比亚、乌拉圭等）

亚洲/中东
（日本、中国、文莱、韩国等）

欧洲
（德国、俄罗斯、西班牙、苏格兰等）

北美
（加拿大、美国等）

澳大利亚/大洋洲
（澳大利亚、基里巴斯、关岛、瓦努阿图等）

南美洲
（阿根廷、巴西、哥伦比亚、乌拉圭等）

您需要将owl项目类别指示为相对位置，并且可以使用负边距


$（'.owl carousel'）.owlCarousel({
中：是的，
循环：对，
保证金：0，
响应：{
320: {
项目：1，
分期付款：70
},
600: {
项目：4
}
}
});
.carousel container.owl-item.center.container img{
不透明度：1；
填充：0；
}
.carousel容器.owl-item.center.Continental文本容器{
不透明度：1；
}
.carousel container.owl-item.center.Continental文本容器h2{
颜色：#2B8088；
字号：1.625rem；
字体系列：“议程”；
}
.旋转木马容器.猫头鹰物品.大陆img容器img{
不透明度：0.5；
边界半径：100px；
}
.carousel容器.owl项.大陆文本容器{
不透明度：0；
}
.猫头鹰舞台.猫头鹰道具{
左边距：-10px；
右边距：-10px；
位置：相对位置；
}

非洲
（阿根廷、巴西、哥伦比亚、乌拉圭等）

亚洲/中东
（日本、中国、文莱、韩国等）

欧洲
（德国、俄罗斯、西班牙、苏格兰等）

北美
（加拿大、美国等）

澳大利亚/大洋洲
（澳大利亚、基里巴斯、关岛、瓦努阿图等）

南美洲
（阿根廷、巴西、哥伦比亚、乌拉圭等）

我在以下帖子中找到了答案：


我基本上改变了选项，如下所示：

$('.owl-carousel').owlCarousel({
  center: true,
  loop: true,
  margin: -50,
  responsive: {
    320: {
      items: 1,
      stagePadding: 70
    },
    600: {
      items: 4
    }
  }
});

谢谢！有没有办法我仍然可以保留所选图像的
opacity:1页面的中心？