Auto Slider in the header

mounika · 2021-04-27T18:37:05+00:00

Can we make this pics slide ? Not hover, it has to scroll For Ex: First Image auto scroll to second image and wait for 3-5 seconds and again wait for 3-...

Auto Slider in the header

josan420

For 6 banners.

CSS:
Paste This to your Custom CSS on Admin Settings

/* slideshow CSS on Admin Setting > Custom CSS */
@keyframes slideshow {
8% {left: 0;}
17% {left: 0;}
25% {left: -100%;}
33% {left: -100%;}
41% {left: -200%;}
50% {left: -200%;}
58% {left: -300%;}
67% {left: -300%;}
75% {left: -400%;}
83% {left: -400%}
91% {left: -500%}
100% {left: -500%}
}
#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;}}

DouglasSouza

josan420 how do i put pictures please can you help me

Ricesy

Can you tell us Logic, how you are calculating @keyframes slideshow % so that we can also change the values upon the formula you use... bcz some time we need only 3 slides, sometime we need 7 slides..

It will be easy us to change the values of % based upon your logic.

josan420

Its math. There are 2 % for every slide.
Here are few examples that u can use:
For 2 slides
25% {left: 0;}
50% {left: 0;}
75% {left: -100%;}
100% {left: -100%;}

For 3 slides
17% {left: 0;}
33% {left: 0;}
50% {left: -100%;}
67% {left: -100%;}
84% {left: -200;}
100% {left: -200;}

For 4 slides
12% {left: 0;}
25% {left: 0;}
37% {left: -100%;}
50% {left: -100%;}
62% {left: -200;}
75% {left: -200;}
87% {left: -300;}
100% {left: -300;}
50% {left: -100%;}
67% {left: -100%;}

josan420

josan420 Its math. There are 2 % for every slide.
Here are few examples that u can use:
For 2 slides
25% {left: 0;}
50% {left: 0;}
75% {left: -100%;}
100% {left: -100%;}

For 3 slides
17% {left: 0;}
33% {left: 0;}
50% {left: -100%;}
67% {left: -100%;}
84% {left: -200;}
100% {left: -200;}

For 4 slides
12% {left: 0;}
25% {left: 0;}
37% {left: -100%;}
50% {left: -100%;}
62% {left: -200;}
75% {left: -200;}
87% {left: -300;}
100% {left: -300;}
50% {left: -100%;}
67% {left: -100%;}

Sorry there are mistakes
Here is correct code:

Its math. There are 2 % for every slide.
Here are few examples that u can use:
For 2 slides
25% {left: 0;}
50% {left: 0;}
75% {left: -100%;}
100% {left: -100%;}

For 3 slides
17% {left: 0;}
33% {left: 0;}
50% {left: -100%;}
67% {left: -100%;}
84% {left: -200;}
100% {left: -200;}

For 4 slides
12% {left: 0;}
25% {left: 0;}
37% {left: -100%;}
50% {left: -100%;}
62% {left: -200%;}
75% {left: -200%;}
87% {left: -300%;}
100% {left: -300%;}

For 7 slides
7% {left: 0;}
14% {left: 0;}
21% {left: -100%;}
28% {left: -100%;}
35% {left: -200%;}
42% {left: -200%;}
50% {left: -300%;}
57% {left: -300%;}
64% {left: -400%;}
71% {left: -400%;}
78% {left: -500%;}
85% {left: -500%;}
92% {left: -600%;}
100% {left: -600%;}

josan420

alabtechnosoft

josan420 @[deleted] @mounika @bhojmandu

4 slider working fine, but 7 slider not working properly its divided into 2 rows and only 4 images showing rest all not showing, it would be great help if you could share the code 7 slider. thanks in advance 🙂

Ricesy

josan420 Thank you so much

mounika

Hello @josan420
Can you please mail me kmounika370@gmail.com

I have few doubts. Not doubts I can ask here also, but it can be easy to message personally

FabricioVieira

I want slider wtih link for single photo

[deleted]

FabricioVieira

Use this for links on images....

DouglasSouza

josan420 how do i put pictures please can you help me

mounika

[deleted] Can you give us code for auto slider, automatically.

bhojmandu

mounika Please check your email and revert back I will send you

alabtechnosoft

josan420 hello Brother, i have tried with 3 slider however while running on home page only 2 sliders are actually working anything did i missed...?

InsightTecnologia

Eu Usei o controle deslizante com 6 slider mas após o 6º slider ele fica um tempo vazio e reaparece novamete com os slider desde o inicio

josan420

alabtechnosoft check my reply from 29 april. Its there. You have to divide the 100% in number of slides.

KarthikKanumolu

alabtechnosoft
Any solution for your question?

alabtechnosoft

KarthikKanumolu

Settings -> Transaction -> Page the below code on home page;

<a href="https://yourdomain.com/">
<img src="/Images/offer_001_new.png"></a>

<a href="https://yourdomain.com/">
<img src="/Images/offer_002_new.png"></a>

<a href="https://yourdomain.com/">
<img src="/Images/offer_003_new.png"></a>

<a href="https://yourdomain.com/">
<img src="/Images/offer_004_new.png"></a>

</figure><a href="https://togox.in/">
</a></div><a href="https://togox.in/">
</a></div><a href="https://togox.in/">
</a></div>

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 with auto slider (4 images);

KarthikKanumolu

alabtechnosoft
Actually I want to make more sliders up to 7 or 8
It's not in a single line, it is coming down

ReDmine

alabtechnosoft There is a way that certain sliders are displayed according to the city or location, since in some cities we do not have the same restaurants as in other cities

RafaelHenriques

alabtechnosoft o meu ficou um abaixo do outro, porq ?

vaibhav23

alabtechnosoft i tried this first image slide and its goes last only not showing middle 2 slides, even size width 767 (500%) looks bigger i copied as it is and another thing after last slide slides it shows white nothing their for 25secs, anyone has working slider

https://ibb.co/zZDyR9g
https://ibb.co/Q8txrM4

josan420

KarthikKanumolu solution is already there. Check my reply from 29 april. It has code for 7 slides.