HTML CSS sliders for everyone

josan420

As many people are asking for it, I am sharing slider code from 2 to 10 slides. I have not tested but it should work without any issue. If there is any issue, just comment here.

FOR 2 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

25% {left: 0;}
50% {left: 0;}
75% {left: -100%;}
100% {left: -100%;}
}
#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:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 3 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

17% {left: 0;}
34% {left: 0;}
50% {left: -100%;}
67% {left: -100%;}
84% {left: -200%;}
100% {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:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 4 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@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: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 5 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

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:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 6 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

8% {left: 0;}
17% {left: 0;}
25% {left: -100%;}
34% {left: -100%;}
42% {left: -200%;}
50% {left: -200%;}
58% {left: -300%;}
67% {left: -300%;}
75% {left: -400%;}
84% {left: -400%;}
92% {left: -500%;}
100% {left: -500%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 7 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

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%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 8 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

6% {left: 0;}
12% {left: 0;}
18% {left: -100%;}
25% {left: -100%;}
31% {left: -200%;}
37% {left: -200%;}
43% {left: -300%;}
50% {left: -300%;}
56% {left: -400%;}
62% {left: -400%;}
68% {left: -500%;}
75% {left: -500%;}
81% {left: -600%;}
87% {left: -600%;}
93% {left: -700%;}
100% {left: -700%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 9 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

5% {left: 0;}
11% {left: 0;}
16% {left: -100%;}
22% {left: -100%;}
27% {left: -200%;}
33% {left: -200%;}
38% {left: -300%;}
44% {left: -300%;}
49% {left: -400%;}
55% {left: -400%;}
62% {left: -500%;}
67% {left: -500%;}
73% {left: -600%;}
78% {left: -600%;}
84% {left: -700%;}
89% {left: -700%;}
94% {left: -800%;}
100% {left: -800%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 10 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

5% {left: 0;}
10% {left: 0;}
15% {left: -100%;}
20% {left: -100%;}
25% {left: -200%;}
30% {left: -200%;}
35% {left: -300%;}
40% {left: -300%;}
45% {left: -400%;}
50% {left: -400%;}
55% {left: -500%;}
60% {left: -500%;}
65% {left: -600%;}
70% {left: -600%;}
75% {left: -700%;}
80% {left: -700%;}
85% {left: -800%;}
90% {left: -800%;}
95% {left: -900%;}
100% {left: -900%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

[deleted]

josan420 Thank you very much 😍

mdsumro

[deleted] whatsapp number change kiya? Extended lincens lena tha

Saurabh

I see everyone needs automatic sliders, so for the Main Position (the one that comes on the top of the homepage) we will create a automatic slider that can automatically swipe from right to left every x seconds and can also be looped.

Keeping this on my mind for the future release.

bhojmandu

Saurabh sure sir

mdsumro

Saurabh and slider can scrolling by finger also and scrolling automatically, with clickable link to items, store and other link

esrour

Saurabh clickable please

Saurabh

esrour obviously, what's the point if the slider images are not clickable. Surely will make it clickable, scrollable automatically, scrollable with finger touch-slide.

bhojmandu

Saurabh great👍

alabtechnosoft

Can anyone help me to get this CSS?

[Link removed]

josan420

alabtechnosoft you can create banners like this using canva. And add to your app using html.

member321

alabtechnosoft

<p>
</p><p>
</p><div class="survey">
<div class="survey1">
<a href="https://forms.gle/formes" target="_blank">
<div class="tg-icon"></div>
<div class="tg-text">YOUR OPINION MATTERS: Take a quick survey and help us serve you better.</div>
<div class="x1"><div class="cloud"></div></div>
<div class="x2"><div class="cloud"></div></div>
<div class="x3"><div class="cloud"></div></div>
<div class="x4"><div class="cloud"></div></div>
<div class="x5"><div class="cloud"></div></div>
</a>
</div>
</div></div>

custom css
/* Survey start/
.survey {
margin:0px auto 0;
max-width: 340px;
}
.survey1 {
margin-bottom: 15px;
}
.survey1 a {
display: block;
background: linear-gradient(146deg , rgb(43 45 44) 50%, rgb(254 2 2) 100%)!important;
border-radius: 15px;
overflow: hidden;
position: relative;
text-decoration: none;
}
.survey1 .tg-icon {
float: left;
width: 50px;
height: 50px;
margin-left: 10px;
margin-top: 10px;
background-size: cover;
background-image: url("https://image.flaticon.com/icons/png/512/3721/3721625.png");
z-index: 10;
}
.survey1 .tg-text {
overflow: hidden;
color: #fff;
font-size: 14px;
line-height: 23px;
padding: 15px 10px;
z-index: 10;
}
.survey1 .cloud {
width: 50px;
height: 50px;
display: block;
background-size: cover;
background-image: url("https://image.flaticon.com/icons/png/512/3061/3061258.png");
position: absolute;
opacity: 0.2;
}
.x1,
.x2,
.x3,
.x4,
.x5 {
position: absolute;
display: block;
}
@-webkit-keyframes animateCloud {
0% {
margin-left: -100px;
}
100% {
margin-left: 100%;
}
}
@-moz-keyframes animateCloud {
0% {
margin-left: -100px;
}
100% {
margin-left: 100%;
}
}
@keyframes animateCloud {
0% {
margin-left: -100px;
}
100% {
margin-left: 100%;
}
}
/ ANIMATIONS */
.x1 {
-webkit-animation: animateCloud 35s linear infinite;
-moz-animation: animateCloud 35s linear infinite;
animation: animateCloud 35s linear infinite;

-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
top: 10px;
}
.x2 {
-webkit-animation: animateCloud 20s linear infinite;
-moz-animation: animateCloud 20s linear infinite;
animation: animateCloud 20s linear infinite;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
top: 20px;
}
.x3 {
-webkit-animation: animateCloud 30s linear infinite;
-moz-animation: animateCloud 30s linear infinite;
animation: animateCloud 30s linear infinite;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
top: 25px;
}
.x4 {
-webkit-animation: animateCloud 18s linear infinite;
-moz-animation: animateCloud 18s linear infinite;
animation: animateCloud 18s linear infinite;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
top: 10px;
}
.x5 {
-webkit-animation: animateCloud 25s linear infinite;
-moz-animation: animateCloud 25s linear infinite;
animation: animateCloud 25s linear infinite;
-webkit-transform: scale(0.55);
-moz-transform: scale(0.55);
transform: scale(0.55);
top: 30px;
}
/* Survey end */

alabtechnosoft

member321 thanks a lot brother let me check 💥🎉🎉

member321

alabtechnosoft must be the website link

alabtechnosoft

member321 OMG i was removed after i published don't know why it was not removed.. really sorry brother

Vigyal

Where would find html file.

LeSecomandi

Can it be GIF?