Question

我有一个问题，显示带有引导程序轮播的上一张和下一张图像/幻灯片的预览。我已按照this 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%;
}

对我出错的任何帮助都将不胜感激。

非常感谢

安东

Answer 1

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

在我看来，Slick是最好的滑块之一，它带来了大量的自定义功能。在您的情况下，我会仔细查看Slick的中心模式。

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

使用bootstrap轮播显示预览（上一张和下一张图片）

1 个答案: