Question

我试图在Bootstrap 4旋转木马上显示两张幻灯片，而在点击下一张或上一张时仅前进1张。它现在正在做，但是当它这样做时，它并没有顺利地滑过。该项目稍微消失，再次出现在另一侧。

以下是我尝试将其滑动为：https://www.bootply.com/wYydqqLLWR

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

Answer 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

Answer 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>

一张旋转木马项目中的两张照片。

Bootstrap 4 Carousel Show 2 Slides Advance 1

2 个答案: