Slideshow are usually used to display more than one feature of a content to user’s. thumbnails shows the previous, current and next feature separately . There are many ways to create a responsive slideshow with thumbnails, but since it’s a beginners tutorial, we are going to use just Html and Css to achieve that in this tutorial.
First we need to organize the slideshow Html Structure
Arranging the Slideshow and thumbnail Html structure
Html
<div class="slideshow-container">
<div class="slideshow">
<img src="./images/large-img3.jpg" alt="Slide 1" />
<img src="./images/large-img2.jpg" alt="Slide 2" />
<img src="./images/large-img1.jpg" alt="Slide 3" />
</div>
<div class="thumbnails">
<img src="./images/large-img1.jpg" alt="Thumbnail 1" />
<img src="./images/large-img2.jpg" alt="Thumbnail 2" />
<img src="./images/large-img3.jpg" alt="Thumbnail 3" />
</div>
</div>
In this example, we have a container <div> with the class “slideshow-container” that wraps the slideshow and the thumbnails. Inside the container, there is a slideshow represented by a <div> element with the class “slideshow” containing <img> elements representing each slide. The thumbnails are represented by a <div> element with the class “thumbnails” containing <img> elements representing each thumbnail.
Please use your image by specifying the direct path to the image.
Next Step: Add Css
CSS
.slideshow {
display: flex;
overflow: hidden;
border: 2px solid blue;
max-height: 90vh;
}
.slideshow img {
width: 100%;
height: auto;
transition: transform 0.5s;
}
.thumbnails {
display: flex;
justify-content: center;
margin-top: 10px;
}
.thumbnails img {
width: 50px;
height: auto;
margin: 0 5px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.5s;
}
.thumbnails img:hover {
opacity: 1;
} /* Position active thumbnail */
.thumbnails img.active {
opacity: 1;
border: 2px solid #007bff;
} /* Slide animation */
.slideshow-container .slideshow img {
animation: slide 5s infinite;
}
@keyframes slides {
0% {
transform: translateX(0%);
}
33% {
transform: translateX(-100%);
}
66% {
transform: translateX(-200%);
}
100% {
transform: translateX(0%);
}
}
Analyzing The Html Code
The entire CSS code is used to achieve our target; which is to create a responsive slideshow with thumbnails.
The “slideshow-container” class sets the position of the container to relative.
The slideshow img class sets the width to 33% and the height to auto, making the slides responsive and all the images showing at the same time. The transition property adds a smooth animation effect when transitioning between slides.
The .thumbnails class sets the display to flex and centers the thumbnails using justify-content.
We use the thumbnails img.active selector to style the active thumbnail by setting the opacity to 1 and adding a border.
Animation
The slide animation is defined using the @keyframes rule. The slide animation moves the slideshow by translating it horizontally using the transform property. Adjust the percentages and translation values to match the number of slides in your slideshow.
Possible Error
If your image width is not above 1000px, you may think that the slideshow is not working as stated. Ensure to use image with good width.
Your Task
Your task is to use the idea you have gotten to create something more unique. you can try creating a slide show of pictures with photo frame. here is a guide on how to create a photo frame in Html and Css
Recommendation
You can customize the HTML structure, image sources, CSS styles, animation duration, and transition effects to fit your specific requirements.
Like I said in the beginning, there are many ways to create a slideshow but hopefully this tutorial gives you a good idea how to create slideshow with thumbnails using Html and Css.