I'm having an issue with the Carousel slider where it is overlapping the image from the second slide onwards. The first image loads properly, but subsequent images are not displaying correctly. Here's a reference image:
CSS
.slide {
height: 473px;
min-width: 100%;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML
<div class="hero-slider-wrapper">
<div
class="slide transition-enabled"
style="left: -100vw; background-image: url('i1.png')"
></div>
<div
class="slide transition-enabled"
style="left: -100vw; background-image: url('i2.png')"
></div>
<div
class="slide transition-enabled"
style="left: -100vw; background-image: url('i3.jpg')"
></div>
<div
class="slide transition-enabled"
style="left: -100vw; background-image: url('i4.png')"
></div>
</div>
In the HTML, the left style property is dynamically determined. However, I am unsure why the images are overlapping starting from the second slide.