I am currently working on modifying the code below so that it will only execute when a specific class is linked to the carousel. There are multiple carousels present on the same page.
@media (min-width: 576px) and (max-width: 768px) {
/* Display the 3rd slide on small screens if col-sm-6 is active */
.carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -50%; /* This part may be altered with JavaScript in future */
z-index: -1;
display: block;
visibility: visible;
}
<div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="2000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">
<img src="assets/img/car_logos/car_logo_PNG1636.png" class="img-fluid mx-auto d-block contain" alt="img1">
</div>