Bootstrap 4 Carousel Show 2幻灯片前进1 [英] Bootstrap 4 Carousel Show 2 Slides Advance 1

问题描述

我正在尝试在Bootstrap 4转盘上显示两个幻灯片，而在单击next或prev时仅前进1个.它现在正在执行，但是一旦执行，它就不会顺利滑过.该项目消失了一点，然后再次出现在另一侧.

I'm trying to show two slides on a Bootstrap 4 carousel while only advancing 1 when next or prev is clicked. It's doing it now but when it does, it doesn't smoothly slide over. The item disappears a bit and reappears on the other side.

这就是我要使其滑动的样子: https://www.bootply.com/wYydqqLLWR

Here is what I'm trying to make it slide like: https://www.bootply.com/wYydqqLLWR

这是我在Bootply上拥有的代码(已使用ZimSystem中的数字进行更新): https://www. bootply.com/9YTnuqUPMs

Here is the code I have on a Bootply (updated with numbers from ZimSystem): https://www.bootply.com/9YTnuqUPMs

推荐答案

它正在按预期方式工作(一次一个)，但是由于图像完全相同，因此很难看到.尝试像这样的不同图片...

It is working as expected (one at a time) but because the images are all the same it's hard to see. Try with different images like this...

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

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

To make the animation more Bootstrap 4 friendly, override the transitions like this...

.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

这篇关于Bootstrap 4 Carousel Show 2幻灯片前进1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！