I am currently utilizing the Bootstrap Carousel and everything seems to be working well until the transition from the last image to the first one. There is a brief moment where the end of the third image overlaps with the first image. You can view this issue in action at the following link:
Below is my carousel code:
<div id="myCarousel" class="carousel slide container" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active" ></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="/zrodla/zdjecia/baner-reklamowy.jpg" alt="First slide">
<div class="carousel-caption text-right">
<h1 class="elo2">Ubezpieczenie OC i AC samochodu</h1>
<p class="ps3">Czas wyruszyć w drogę..</p>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="/zrodla/zdjecia/baner2.jpg" alt="Second slide">
<div class="carousel-caption text-right">
<h1 class="elo2" >Życie to najcenniejszy dar</h1>
<p class="ps3">Zadbaj o nie</p>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="/zrodla/zdjecia/baner3.jpg" alt="Third slide">
<div class="carousel-caption text-right">
<h1 class="elo2">Wszędzie dobrze ale w domu najlepiej </h1>
<p class="ps3">Pakiet majątkowy z pewnością spełni twoje oczekiwania</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>