显示预览(前一个和下一个图像)与引导旋转木马

Showing previews (previous and next image) with bootstrap carousel

本文关键字：图像 下一个 旋转木马 一个 显示      更新时间：2023-09-26

我有一个问题，显示上一个和下一个图像/幻灯片与引导旋转木马的预览。我已经按照这篇StackExchange文章中的说明进行了操作，但是无论我重新开始编写多少次，它都不能正常显示。

它一直被截断并显示如下

我已经创建了一个Fiddle来演示这个问题。

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

    .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%;
}

如果您能告诉我哪里出了问题，我将不胜感激。

多谢安东

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

在我看来，Slick是最好的滑块之一，它有大量的自定义可能性。在你的情况下，我会仔细看看Slick的中心模式。

你所要做的就是改变样式和slidesToShow属性。

相关文章：