I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: flex and gap: 10px. While this initially works well, the gap disappears and reappears as the carousel moves, creating an unpleasant effect. You can view the issue in this video
Here is the HTML code snippet:
<div id="newProductsCarousel" class="carousel slide" data-bs-ride="carousel">
// Carousel items here...
</div>
Sass code snippet:
//Mobile
.newProductsCarousel {
// Styling for mobile view
}
// Desktop
.newProductsCarousel {
// Styling for desktop view
}
JS Code:
// JavaScript logic here
I have attempted different solutions like applying display: flex; to all carousel-item elements, but it caused issues with the carousel movement. Another approach was adding margins to the middle div, however, it resulted in the same unwanted effect.