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

Popular posts from this blog

How To Create First Hello World Android Application

By
Create First Hello World Android  Application Step 1)  Click Create New Project   on Android Studio Landing Page or   File > New> New   Project On IDE. Step 2)     A new Wizard Will Appear in That Wizard Give Name To Your Application (Name Must Be Start With Capital Letter)   And you can Choose Project Location. After filling that Click NEXT . Step 3)   In Next Wizard You Have to Select Minimum SDK Version For Your Application Step 4)   Next Wizard Will be   for select First Activity Appearance    (Select It as Empty Activity) Step 5)   Next Wizard For Name The First Activity . After that Click Finish. ·        After Click Finish Default Hello World Project Will Build Automatically . ·        This Is the Layout Code of Default Hello Wor...
Post a Comment
Read more

Best Torrent Sites

By
Torrent is one of the most recent technicals words because, Some of the world's most popular torrent websites are banned. However, as it is one of the most popular download methods in the world, torrent technology cannot be stopped. In our country, many people use torrents to download data such as films, games, and software. The torrent file-sharing method uses peer to peer (peer-to-peer) technology. This is the method of downloading files from one computer to another at the same time. It is on a computer that is downloading or downloading the torrent file. Here The Best Torrent Downloading Sites,   YTS.lt YTS   is Movie Torrent site, You Can download latest Movie's Torrent files, With Different Video Qualities, Also the have old movie Collections,    2. 1337X.to 1337x  Is the  Most Popular Torrent site nowadays, Because This Site has Lot of Things To download,  Such as  MOVIES TELEVISION(Library) GAMES MUS...
Post a Comment
Read more

What Is Grammarly

By
 What's Grammarly These days Grammarly is a great tool that allows writers, Low  English Knowlege Peoples, and different professionals to proofread and edit their paperwork for grammar and spelling. Grammarly checks for greater than 250 sorts of spelling, grammar and punctuation errors, and enhances vocabulary utilization. Each an internet model and one which integrates with MS Phrase can be found.
Post a Comment
Read more