Slideshow in CSS
Slideshow in CSS
Slideshow in CSS is a popular UI element used in web design to display a sequence of images or other media. Here is an example of how to create a simple slideshow using CSS:
HTML:
<div class="slideshow-container">
<div class="slideshow-image fade">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Image 1" data-lazy-src="image1.jpg"><noscript><img decoding="async" src="image1.jpg" alt="Image 1"></noscript>
</div>
<div class="slideshow-image fade">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Image 2" data-lazy-src="image2.jpg"><noscript><img decoding="async" src="image2.jpg" alt="Image 2"></noscript>
</div>
<div class="slideshow-image fade">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Image 3" data-lazy-src="image3.jpg"><noscript><img decoding="async" src="image3.jpg" alt="Image 3"></noscript>
</div>
<a class="prev" onclick="changeSlide(-1)">❮</a>
<a class="next" onclick="changeSlide(1)">❯</a>
</div>
CSS:
.slideshow-container {
position: relative;
}
.slideshow-image {
display: none;
position: absolute;
top: 0;
left: 0;
}
.slideshow-image img {
width: 100%;
height: auto;
}
.fade {
animation-name: fade;
animation-duration: 1s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-weight: bold;
padding: 10px;
color: white;
text-decoration: none;
}
.next {
right: 0;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
In this example, we create a slideshow using a container div with the class slideshow-container and a series of divs with the class slideshow-image that each contain an img tag with the source set to a different image file.
We use CSS to set the position of the slideshow container to relative and the position of each image to absolute to position the images on top of each other.
We use the display: none property to hide all of the slideshow images except for the first one. We also define a fade animation that will gradually transition between each image.
We add previous and next buttons to the slideshow using anchor tags with the classes prev and next respectively. We use CSS to position these buttons at the center of the slideshow container and set their font size and weight to make them more visible. We also add a hover effect to the buttons to darken their background when the user hovers over them.
We use JavaScript to create a function called changeSlide that will be called when the user clicks on a previous or next button. This function will show the next or previous image in the slideshow and hide the current image using the display and opacity properties.
This is a basic example of a slideshow, but there are many ways to customize and enhance this basic structure to create more complex and visually appealing slideshows with additional features such as autoplay, captions, and more.