Paste This To your HTML section
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://urdomain.com/a.png">
<img src="https://urdomain.com/b.png">
<img src="https://urdomain.com/c.png">
<img src="https://urdomain.com/d.png">
<img src="https://urdomain.com/e.png">
</figure>
</div>
</div>
CSS:
Paste This to your Custom CSS on Admin Settings
@keyframes slideshow {
10% {left: 0;}
20% {left: 0;}
30% {left: -100%;}
40% {left: -100%;}
50% {left: -200%;}
60% {left: -200%;}
70% {left: -300%;}
80% {left: -300%;}
90% {left: -400%;}
100% {left: -400%}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:20s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}
