javascript - 使用 Bootstrap 轮播显示预览(上一张和下一张图片)

Question

我在使用 Bootstrap 轮播显示上一张和下一张图像/幻灯片的预览时遇到问题。我已按照 this 中的说明进行操作StackExchange 文章，但无论我重新开始并重新编写多少次，它都无法正常显示。

它不断被 chop 并显示在下方。

我创建了一个 Fiddle来证明这个问题。

我不想显示太多接下来的幻灯片，可能每边 20 像素，主要是为了提示用户滑动/滑动。

    .carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 150%;
    left: -25%;
}
.carousel-inner > .item.next, 
.carousel-inner > .item.active.right {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, 
.carousel-control.right {
    background: rgba(255, 255, 255, 0.3);
    width: 25%;
}

如能就我出错的地方提供任何帮助，我们将不胜感激。

非常感谢

安东

Answer 1

我建议您不要重新发明轮子，而是选择一个已经具有您正在寻找的功能或至少具有类似功能的 slider 。

在我看来Slick是最好的 slider 之一，它具有大量的定制可能性。在你的情况下，我会仔细看看 Slick 的 Center Mode .

要实现您的目标，您只需更改样式和 slidesToShow 属性即可。