Bootstrap 4 Carousel Show 2 Slides Advance 1 [关闭]答案

【问题标题】：Bootstrap 4 Carousel Show 2 Slides Advance 1 [closed]Bootstrap 4 Carousel Show 2 Slides Advance 1 [关闭]
【发布时间】：2017-05-17 14:47:46
【问题描述】：

我正在尝试在 Bootstrap 4 轮播上显示两张幻灯片，同时在单击下一个或上一个时仅推进 1。它现在正在这样做，但是当它这样做时，它不会顺利滑过。该项目消失了一点，然后重新出现在另一边。

这是我试图让它像滑动一样：https://www.bootply.com/wYydqqLLWR

这是我在 Bootply 上的代码（使用 ZimSystem 中的数字更新）：https://www.bootply.com/9YTnuqUPMs

【问题讨论】：

你能解释的更准确点吗？您附加的第一个链接是显示两张幻灯片并在点击时移动一张，我不明白实际上出了什么问题。
我补充了一些解释

标签： jquery css twitter-bootstrap carousel

【解决方案1】：

它按预期工作（一次一个），但由于图像都是相同的，所以很难看到。尝试像这样的不同图像...

https://www.bootply.com/9YTnuqUPMs

要使动画更Bootstrap 4 友好，请像这样覆盖过渡...

.carousel-inner .carousel-item-left.active {
  transform: translateX(-50%);
}
.carousel-inner .carousel-item-right.active {
  transform: translateX(50%);
}

.carousel-inner .carousel-item-next {
  transform: translateX(50%)
}
.carousel-inner .carousel-item-prev {
  transform: translateX(-50%)
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

https://www.bootply.com/G33EYIj4eF

另见：https://stackoverflow.com/a/20008623/171456

【讨论】：

当它过渡时，它会消失然后重新出现。我正在看的另一个靴子非常光滑，右侧的项目滑过而没有消失。你知道如何修复它的那部分吗？
这是一个改变动画的问题。我更新了我的答案。
效果很好！谢谢！
实时站点上的每张幻灯片都是一个图像，就像在 bootply 上一样，但以 KB 为单位更大。在幻灯片动画完成之前，除了 Slide2 之外，新图像似乎不会呈现。有没有办法确保图像滑入而不是最后一次全部出现？
我不太确定，但我知道 Bootstrap 在应用动画样式方面有自己的时间安排。

【解决方案2】：

我知道出了什么问题。如果你想得到和第一个一样的结果，你会改变：

<div class="carousel-item">
<img class="d-block col-6 img-fluid" src="http://placehold.it/350x150">
<img class="d-block col-6 img-fluid" src="http://placehold.it/350x150">
</div>

两个图片在一个轮播项目中。

【讨论】：

我现在有二合一，但我希望一次通过它转换一个项目，就像另一个答案显示的那样。我需要帮助的部分是让它不会消失，并且像提到的第一个引导层那样很好地滑过。
carousel-item 中只有一个 img，检查一下。
是的，jQuery 代码添加了一个新代码并处理它们的交换。它在这样的两个 Bootply URL 中都起作用。
这很令人困惑。当我在一个项目中添加两个 img 时，它已开始作为第一个示例工作。
这使得每个按钮同时移动两张幻灯片。我希望一次做一个，同时展示两个。我试过你在这里说的：bootply.com/ewfHGyrvlO#