Auto Slider in the header

mounika

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-5 seconds and move to third image.

Can any one help me to achieve this ?

josan420

mounika you can use html slider and it is auto scrolling. Just disable promo slider and use html slider through translation panel.

FabricioVieira

josan420 do you have a code for example

renidev

josan420 but we cannot control it using delivery area pro of you have services and offers for multi locations. If your in one location, then html slider will do the job

josan420

FabricioVieira

CSS:
Paste This to your Custom CSS on Admin Settings

/* slideshow CSS on Admin Setting > Custom CSS */
@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;}}

mounika

josan420 Hey Hi
It was good, but it is not going back. I mean if I missed a slide and if I want to scroll back. It is not going back
Any solution for that too

bhojmandu

josan420 how can i add more than 5 banners

DouglasSouza

josan420 how do i put pictures please can you help me

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...?

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....

mounika

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

bhojmandu

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