Carousel image slider overlapping from second image

Question

I am facing issue with Carousel slider, it is overlapping image from second one. First image is loading properly. I am attaching an image for the reference:

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 html, left style property is dynamically decided. But I am not getting why images are overlapping from second slider onwards.

Answer 1

I resolved this my self for my website. We need to change the min-width to 100vw instead of 100%

.slide {
        height: 473px;
        min-width: 100vw; // this is what I changed
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
}