0

I have a bootstrap 4 carousel slider at https://competent-lamport-72eab6.netlify.com/.

The slider has 3 slides. However, for page speed optimization I've included 5 images of different sizes that load at specific screen widths. I've done this using <picture> and <srcset>.

See my code below:

<div class="carousel-item">
 <picture>
    <source class="lazy" srcset="img/carousel/great-wall44-375.jpg" media="(max-width: 375px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-768.jpg" media="(max-width: 768px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-1200x514.jpg" media="(max-width: 1200px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-1400x514.jpg" media="(max-width: 1400px)" >  
    <source class="lazy" srcset="img/carousel/great-wall44-1920x902-low.jpg" media="(max-width: 1920px)" >
    <img class="lazy" src="img/carousel/great-wall44.jpg" data-src="img/carousel/great-wall44-new5.jpg" >
 </picture>
</div>

As you can see I have various images loading at their respective breakpoints: 375px, 768px, 1200px, 1400px and 1920px. This works brilliantly however..

The Problem

When the page is resized (or seen on a small device) the first 2 slides transition very well, however the last slide seems to first slide to the full width of the image within the slide before sliding back to the first slide again.

Here is an example with pictures to help clarify the issue:

  1. Let's go to https://competent-lamport-72eab6.netlify.com/.

  2. We've resized the browser to 400px. You will see that the slider loads a 768px image between 375px and 767px screen width. See image below:

    enter image description here

  3. The first 2 slides slide nicely. Great!

  4. Here's the 3rd Slide at 400px screen width:

    enter image description here

  5. And here's the full 768px sized image inside the 400px slide div.

    enter image description here

  6. So here when it slides, instead of sliding the cropped image at 400px, it slides all the way to the full image at 768px first and looks like this in the transition:

    enter image description here

before going back to the 1st slide.

So this is the issue. It happens at each breakpoint along the way.

This looks incredibly janky. What I'd like is to fix this. The final slide should animate just as the first 2 slides do. Please have a look at the slider and recreate my steps to see the issue in action.

I'd appreciate any assistance,

Thanks in advance.

Wayne R Hendricks
  • 176
  • 1
  • 13

1 Answers1

0

I have found the solution to the carousel image not cropping to the slider width. I solved this by adding overflow: hidden; to .carousel-item.

So the html remains the same. But the CSS has added.

.carousel-item {
      overflow: hidden;
}

Great stuff! I hope this can help anyone looking at bootstrap carousels slider image overflow problem.

Wayne R Hendricks
  • 176
  • 1
  • 13