CSS slider

173
166
153
129
135
116
122
172

Here is the simplest CSS slider in the world.

Advantage – ease and safety. Disadvantage – it is difficult to repeat the cycle without rebooting. But it’s possible using the animation timing method.

Code:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>CSS slider</title>
<style>
/* Slider */
#slaid {
	/* Set relative positioning */
	position: relative;
	/*Size and frame of the slider*/
	width: 400px;
	height: 200px;
	border: 2px solid #333;
	border-radius: 5px;
}
/* Group selector for 7 pictures */
.image1,
.image2,
.image3,
.image4,
.image5,
.image6,
.image7 {
/* We position absolutely */
	position: absolute;
/* We make them completely transparent */
	opacity: 0;
	width: 400px;
	height: 200px;
}
/* Animation for the first picture */
.image1{
	animation: one-image 8s 1s ease alternate;
}
/* Animation of subsequent pictures is performed with a delay of the beginning of
the necessary for scrolling previous images */ .image2 { animation: two-image 8s 5s ease alternate; } .image3 { animation: three-image 8s 10s ease alternate; } .image4 { animation: four-image 8s 14s ease alternate; } .image5 { animation: five-image 8s 18s ease alternate; } .image6 { animation: six-image 8s 22s ease alternate; } .image7 { animation: seven-image 8s 26s ease alternate; } /* The last picture is opaque */ .image8 { position: absolute; width: 400px; height: 200px; animation: eight-image 34s ease alternate; } /* Animations for the first picture */ @keyframes one-image{ /* Set the transparency change */ 0% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Animation for the next 6 pictures */ @keyframes two-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes three-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes four-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes five-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes six-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes seven-image{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Animation for the eighth picture */ @keyframes eight-image{ /* Remains transparent until the previous ones are scrolled */ 0% { opacity: 0; } 87% { opacity: 0; } /*Become visible at the end */ 100% { opacity: 1; } } </style> </head> <body> <div id="slaid"> <img class="image1" src="images/172.jpg"> <img class="image2" src="images/166.jpg"> <img class="image3" src="images/153.jpg"> <img class="image4" src="images/129.jpg"> <img class="image5" src="images/135.jpg"> <img class="image6" src="images/116.jpg"> <img class="image7" src="images/122.jpg"> <img class="image8" src="images/173.jpg"> </div> </body> </html>

I wish you creative success.

This entry was posted in Free Scripts. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *