Despite trying various methods to center this slider, such as using align="center" and different margin styles on the images and slider div itself, I am still facing alignment issues. Any assistance would be greatly appreciated. This is my first time posting, so apologies if the format is not correct. The problematic code snippet is provided below:
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000); #slideshow {
margin: 0px auto;
position: relative;
max-width: 1200px;
height: 720px;
<!-- padding: 10px;
--> box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.ppt img {
margin-left: -50%;
}
.ppt li {
left: 50%;
}
#slideshow > div {
position: absolute;
}
.clear {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<div id="slideshow">
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
... (remaining HTML code here) ...
</div>
</div>
</div>