I am in the process of creating a slideshow, but I am encountering an issue where the image and text briefly display at the bottom during the fadeout transition before moving away completely.
jQuery(document).ready(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first').fadeOut(1000)
`enter code here`
.next().fadeIn(1000)
.end().appendTo('#slideshow');
}, 9000);
});#slideshow {
margin: 0px;
position: relative;
width: 400px;
height: 403px;
padding-left: 250px;
box-shadow: 0 0 0px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
/*align-items:flex-start;*/
overflow: visible;
width: 400px;
position: relative;
}<div id="slideshow">
<div style="display:inline" align: "left !important" padding-left: "40em;">
<p style="padding-left:0em;width:200px;height: 0px;text-align: start;"><strong class="b1">our aim is</strong> <strong class="b2">Dedicated</strong> <strong class="b3">To conducting business affairs using<br />
the highest standards</strong>
</p>
<img src="images/slider-img1 - Copy.jpg" alt="" style="padding-left:45em;" />
</div>
<div style="display:inline" align: "left !important" padding-left: "40em;">
<p style="padding-left:0em; width:200px;height: 0px;text-align: start;"><strong class="b1">our solidity is</strong> <strong class="b2">equity</strong> <strong class="b3">Innovation, flexibility, quick and<br />
high results - oriented work</strong>
</p>
<img src="images/slider-img2 - Copy.jpg" alt="" style="padding-left:30em;" />
</div>
</div>