My website features numerous carousel sliders that function perfectly on PC, but appear unappealing on mobile devices. The issue at hand is as follows:
Imagine each carousel slide contains a maximum of 4 images, all within a col-md-3.col-12 div.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-3 col-12">
<img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
</div>
<div class="col-md-3 col-12">
<img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
</div>
<div class="col-md-3 col-12">
<img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
</div>
<div class="col-md-3 col-12">
<img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-12">
<img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
On the initial slide, each of the 4 divs has a height of 20px. However, in mobile view, the div.col-12.col-md-4 elements are positioned vertically, causing them to stack up and resulting in a total slide height of 80px.
In the subsequent slide, with only 1 div.col-12.col-md-4, the slide is 20px in height.
Here is the first slide:
https://i.sstatic.net/jcnac.png
And here is the next slide:
https://i.sstatic.net/Yt6mL.png
Due to these height variations, the page jumps when the slide changes. What could be a viable solution to address this problem?
One potential solution could be to add a min-height:80px to the carousel to offset the height discrepancies in different slides (specifically in mobile view). However, this may not be the most elegant approach.
Another option could be to disable the carousel in the mobile view, so all items are displayed without sliding (if possible, and if so, how can this be implemented?).
Here is the JSFiddle for reference: