Created
January 28, 2017 23:59
-
-
Save gohilumesh/7359d812050c036518a75314ad6f9f6d to your computer and use it in GitHub Desktop.
CSS Slider using Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .slider { | |
| overflow: hidden; | |
| width: 700px; | |
| height: 350px; | |
| } | |
| .slider figure img { | |
| width: 20%; | |
| float: left; | |
| } | |
| .slider figure { | |
| width: 500%; /* no of image X 100%*/ | |
| position: relative; | |
| left: 0; | |
| margin: 0; | |
| animation: 25s slider infinite; | |
| } | |
| /* | |
| Calculation of keyframes | |
| Image is displayed for 4 sec | |
| transistion of images from one to another is 1 sec | |
| So 1 image is displayed 5 sec. | |
| Total duration of slider = 5 sec X 5 images = 25 sec slider duration | |
| So our stop are 4 sec, 5 sec, 9 sec, 10 sec, 14 sec, 15 sec, 19 sec, 20 sec, 24 sec, 25 sec | |
| our first stop is (4 * 100) / 25 | |
| where 4 is no of sec | |
| 25 is the total slider duration. | |
| */ | |
| @keyframes slider { | |
| 0% { | |
| left: 0; | |
| } | |
| 16% { | |
| left: 0; | |
| } | |
| 20% { | |
| left: -100%; | |
| } | |
| 36% { | |
| left: -100%; | |
| } | |
| 40% { | |
| left: -200%; | |
| } | |
| 56% { | |
| left: -200%; | |
| } | |
| 60% { | |
| left: -300%; | |
| } | |
| 76% { | |
| left: -300%; | |
| } | |
| 80% { | |
| left: -400%; | |
| } | |
| 96% { | |
| left: -400%; | |
| } | |
| 100% { | |
| left: -500%; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Image Slider</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, intial-scale=1.0"> | |
| <link rel="stylesheet" href="slider.css" type="text/css"> | |
| </head> | |
| <body> | |
| <div class="slider"> | |
| <figure> | |
| <img src="https://placehold.it/700x350" alt="first Image"> | |
| <img src="https://placehold.it/700x350" alt="second Image"> | |
| <img src="https://placehold.it/700x350" alt="third Image"> | |
| <img src="https://placehold.it/700x350" alt="fourth Image"> | |
| <img src="https://placehold.it/700x350" alt="fifth Image"> | |
| </figure> | |
| </div> | |
| </body> | |
| <html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment