Image sliders usually include some Javascript or jQuery to handle the sliding functionality. But in order to create a simple image slider using purely HTML and CSS, here’s an example:
Consider we have three images (img1.jpg, img2.jpg, img3.jpg).
HTML:
```
.slider {
width: 300%;
height: 100vh;
display: flex;
animation: slideshow 15s infinite alternate;
}
.slide {
width: 33.33%;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.one {
background-image: url(“img1.jpg”);
}
.two {
background-image: url(“img2.jpg”);
}
.three {
background-image: url(“img3.jpg”);
}
@keyframes slideshow {
0% { margin-left: 0;}
33.33% { margin-left: 0;}
50% { margin-left: -100%;}
83.33% { margin-left: -100%;}
100% { margin-left: -200%;}
}
```
This CSS code gives each image (contained in .one, .two and .three) a width of 33.33%, so that when the slide animates it only shows one image on the screen at a time. It uses keyframes to shift the margin-left of the slider from 0 to -100% (to show the second image) and then -200% (to show the third image) periodically.
Note: This solution assumes that your images are the same size and are able to cover the full view height (‘vh’) property. If they are not, you may need to adjust their size accordingly.
To handle user input (clicks, swipes), and do more complex transitions requires Javascript or jQuery.
