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

How To Create App for Input a Value and Show it as a Toast message and in a Text box

By
How To Create App for Input a Value and Show it as a Toast message and in a Text box  Step 1)  Create New Android Project With Empty Activity. Step 2)     Add a EditText, a Button and TextView In Design mode To activity_main.xml or Hardcode it . activity_main.xml – Design mode activity_main.xml – Text mode Step 3)   Program the App process in MainActivity.java. ·        Assign the Components. ·        Click Event. ·        Get Text , Set Text from EditText to TextView. ·        Toast Message.           MainActivity.java Code: import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; public ...
Post a Comment
Read more