-4

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.

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

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

Wes
  • 866
  • 10
  • 19

2 Answers2

1

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

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

Also see: https://stackoverflow.com/a/20008623/171456

Community
  • 1
  • 1
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • As it transitions, it disappears and then reappears. The other bootply I was looking at is very smooth and the item on the right slides over without disappearing. Do you know how to fix that part of it? – Wes May 17 '17 at 15:50
  • It's a matter of changing the animations. I updated my answer. – Carol Skelly May 17 '17 at 16:17
  • Works great! Thank you! – Wes May 17 '17 at 16:22
  • Each slide on the live site is an image just like on the bootply but are bigger in KB. The new image coming in doesn't seem to render until the slide animation is done on all except for Slide2. Is there a way to make sure images sliding in instead of appearing all at once at the end? – Wes May 17 '17 at 16:41
  • I'm not really sure, but I do know that Bootstrap has it's own timing in applying the animation styles. – Carol Skelly May 17 '17 at 23:25
-1

I see what's wrong. If you want to have the same result as the first one, you will change:

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

Two pictures in one carousel-item.

Dawid Karasiewicz
  • 144
  • 5
  • 1
    I have two in one now but I'm looking to transition one item at a time through it like the other answer was showing. The part I need help with is making it so it doesn't disappear and slides over nicely like the first boot ply mentioned does. – Wes May 17 '17 at 15:52
  • You have only one img in carousel-item, chek it out. – Dawid Karasiewicz May 17 '17 at 15:55
  • 1
    Yes, the jQuery code adds in a new one and handles swapping them. It's functioning in both Bootply URLs like that. – Wes May 17 '17 at 15:59
  • It's pretty confusing. When I added two img in one item it has started working as the first example. – Dawid Karasiewicz May 17 '17 at 16:05
  • That makes each button cause two slides to move at once. I'm looking to do one at a time while showing two. I tried what you said here: https://www.bootply.com/ewfHGyrvlO# – Wes May 17 '17 at 16:08