I am currently using CarouFredSel to create an image carousel, but I am encountering some issues with the transitions between items.
My goal is to incorporate simple HTML elements into the carousel instead of just plain images. However, when I attempt to do this, the swipe transition does not function properly. The new image flashes in abruptly rather than smoothly sliding in, causing the background to briefly appear in between images.
<div id="carousel">
<div>
<img src="img/instagram1.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
</div>
<div>
<img src="img/instagram2.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
</div>
</div><!-- /carousel -->
Upon examining this JSFiddle, you can see that the transition effect works smoothly with just images but appears distorted when HTML elements are included.