Auto Slider For 4 banners with HTML & CSS work (You can try with Home Page or Restaurant Page (Meta tab));
1, Go to -> Modules -> translations -> English ->Edit -> find (Custom Home Message) ->Change into code view -> paste below code;
<div id="slider">
<div style="position: relative; background: rgb(248, 249, 250);">
<div id="slider">
<figure>
<img src="/Images/huntandeat_offer_01.png">
<img src="/Images/huntandeat_offer_04.png">
<img src="/Images/huntandeat_offer_02.png">
<img src="/Images/huntandeat_offer_03.png">
</figure>
</div>
</div>
</div>
Note: Please make sure that, you have placed banner images on the server and place respective path here.
2, Go to-> Settings -> Custom CSS -> paste the below code
/* HOME PAGE AUTO SLIDER /
@keyframes slideshow {
12% {left: 0;}
25% {left: 0;}
37% {left: -100%;}
50% {left: -100%;}
62% {left: -200%;}
75% {left: -200%;}
87% {left: -300%;}
100% {left: -300%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 20px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:25s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}
/ HOME PAGE AUTO SLIDER */
Result will be like this as auto slider;
Thanks you team for your support as always 🙂
