Javascript 在容器外部使用Owl转盘显示多个图像

我使用Owl旋转木马插件在一个行容器中显示4个缩略图（带引导）。如何在不更改容器内4个缩略图的情况下在容器外显示更多缩略图？我在几个网站上看到过这种效果，遗憾的是我不记得确切的位置

容器外部的图像就像阴影一样，直到它们进入容器内部并变得可见。在图像中，蓝色缩略图是常规图像，外部的不透明度调低或以背景色覆盖

$（'.owl carousel'）.owlCarousel({
循环：对，
差额：10，
导航：是的，
导航文本：[''，''，
点：错，
自动播放：对，
自动播放超时：3200，
自动播放速度：2000，
响应：{
0:{
项目：1
},
600:{
项目：4
}
}
})

---

将此添加到您的样式中：

.owl-carousel .owl-stage-outer {
    overflow: visible;
}
.owl-carousel .owl-stage-outer .owl-item {
    opacity: 0.25;
    transition: opacity 0.5s ease-out;
}
.owl-carousel .owl-stage-outer .owl-item.active {
    opacity: 1;
}

---

根据您的喜好使用这些值。

将其添加到您的样式中：

.owl-carousel .owl-stage-outer {
    overflow: visible;
}
.owl-carousel .owl-stage-outer .owl-item {
    opacity: 0.25;
    transition: opacity 0.5s ease-out;
}
.owl-carousel .owl-stage-outer .owl-item.active {
    opacity: 1;
}

---

玩你喜欢的价值观。

哇，有那么简单吗？我不敢问，认为这太复杂了。我从多次把头撞在桌子上学到的一件事是，试着在任何地方想得更简单——简单更好。试着先用CSS思考，然后用JavaScript思考。哇，有那么简单吗？我不敢问，认为这太复杂了。我从多次把头撞在桌子上学到的一件事是，试着在任何地方想得更简单——简单更好。尝试先用CSS思考，然后用JavaScript思考。