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.