Slider Banner
html code
<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://i.ibb.co/s1DHJCL/62834-OACMY6-383-copy.jpg" alt="62834-OACMY6-383-copy" border="0">
<img src="https://i.ibb.co/FHSQgQd/top-up.png" alt="top-up" border="0">
<img src="https://i.ibb.co/s1DHJCL/62834-OACMY6-383-copy.jpg" alt="62834-OACMY6-383-copy" border="0">
</figure>
</div>
</div>
css custom code
`@keyframes slideshow {
0%, 25%, 100%{left: 0}
30%, 55%{left: -100%}
60%, 85%{left: -200%}
}
#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;}}
`
css custom slider category
.secondary-slider-wrapper {
position: relative;
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-template-rows: 100px 100px;
grid-gap: 2px;
}
.slider-wrapper__img-wrapper{
margin-left: 1rem;
margin-right: 0.5;
}
.slider-wrapper__img-wrapper:first-child{
margin-left: 1rem;
}