Skip to main content

Simple Image Slider Using HTML & CSS

By

This Is the Simplest Image Slider I Have  Discovered, Because Its  Easy To Remember and it doesn't have any JavaScript Code,

And remember one thing this is only designed for 4 Images and its animate using image Width.

So you Have To use your Fist image as a 5th image Again to avoid transition Flash, Lets Begin.


Preview



HTML

<html>
<head>
<title>Image Slider</title>

</head>
<body>

<div id="slider">
<figure>
<img src="img1.png">
<img src="img2.png">
<img src="img3.png">
<img src="img4.png">
<img src="img1.png">
</figure>
</div>

</body>
</html>

CSS

#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
float: left;
width: 20%;
}

@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}

HTML CSS All Together

<html>
<head>
<title>Image Slider</title>
<style type="text/css">

#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
float: left;
width: 20%;
}

@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}

</style>
</head>
<body>

<div id="slider">
<figure>
<img src="img1.png">
<img src="img2.png">
<img src="img3.png">
<img src="img4.png">
<img src="img1.png">
</figure>
</div>

</body>
</html>
NOTE:- You have to save Your Image in Your HTML File Directory.

eg:

simple Slider Folder-|
                                  index.html
                                  img1.png
                                  img2.png
                                  img3.png
                                  img4.png
Labels:

Comments

Post a Comment