Check out my Bootstrap 4 carousel slider on this link.
The slider consists of 3 slides, but for optimal page speed performance, I've included 5 images of different sizes that load at specific screen widths. This was achieved using the <picture> and <srcset> elements.
Take a look at the code snippet 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>
The images are set to load at their respective breakpoints: 375px, 768px, 1200px, 1400px, and 1920px. The functionality works flawlessly up until..
The Issue
Upon resizing the page (or viewing on a small device), the first 2 slides transition smoothly, while the final slide appears to initially expand to the full width of the image before returning to the beginning of the slideshow.
To illustrate this problem further, refer to the examples provided:
- Visit this site.
Resize the browser to 400px. You'll notice that a 768px image is loaded within a 375px - 767px screen width range in the slider. View the image below for reference:
The first 2 slides function smoothly. Good job!
Here's what the 3rd Slide looks like at 400px screen width:
An illustration of the 768px image displayed within the 400px slide div.
As it transitions, instead of sliding with the cropped image at 400px, it expands all the way to the full 768px image before returning to the start, resulting in an awkward animation:
This behavior occurs at each breakpoint during the process.
This jarring effect is undesirable. I am seeking assistance to address this issue. Please review the slider and replicate the steps to observe the problem firsthand.
Your help is greatly appreciated,
Thank you in advance.