使用引导轮播显示预览（上一张和下一张图像）答案

【问题标题】：Showing previews (previous and next image) with bootstrap carousel使用引导轮播显示预览（上一张和下一张图像）
【发布时间】：2016-09-03 01:41:54
【问题描述】：

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

它不断被截断并显示在下面。

我创建了一个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%;
}

对于我哪里出错的任何帮助将不胜感激。

非常感谢

安东

【问题讨论】：

您的小提琴示例与原来的 SO 问题相差甚远。
感谢您的评论。虽然原始 SO 问题之间存在一些差异，但我不确定它们远非相似。尽管最初的问题略有不同，但我希望实现的最终解决方案非常相似。在这两种情况下，答案都是引导轮播，将当前项目居中，并在任一侧显示下一个和上一个图像的部分预览。这正是我想要重现的效果。

标签： javascript html css twitter-bootstrap

【解决方案1】：

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

在我看来，Slick 是最好的滑块之一，它具有大量的自定义可能性。在您的情况下，我会仔细查看Slick 的Center Mode。

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

【讨论】：