html auto slideshow
<html>
<head>
<style>
#slider {
width: 100%;
height: 100%;
margin: 0 auto;
border: 10px solid transparent;
padding: 0px;
z-index: 100;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
#slider > li {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); /* Slide css animation */
background-size: cover;
vertical-align: top;
box-sizing: border-box;
white-space: normal;
}
</style>
</head>
<body>
<ul id="slider">
<li>
<p>Some content.</p>
</li>
<li>
<p>Some more content.</p>
</li>
<li>
<p>And here's space for more.</p>
</li>
</ul>
<script>
// Slide every slideDelay seconds
const slideDelay = 3000;
const dynamicSlider = document.getElementById("slider");
var curSlide = 0;
window.setInterval(()=>{
curSlide++;
if (curSlide === dynamicSlider.childElementCount) {
curSlide = 0;
}
// Actual slide
dynamicSlider.firstElementChild.style.setProperty("margin-left", "-" + curSlide + "00%");
}, slideDelay);
</script>
</body>
</html>