To create an Image Slider with thumbnails, you can use HTML, CSS, and JavaScript. Below is a simple example to get you started
Image slides with thumbnails are a popular and visually appealing way to display a series of images or photographs. This type of slide is commonly used in presentations, websites, and even social media platforms. The main feature of an image slide with thumbnails is the ability to showcase multiple images in a single slide, making it an efficient and space-saving option for presenting a large number of images.
The thumbnails, which are small versions of the main images, are usually displayed on the bottom or side of the slide, allowing the viewer to easily navigate through the images. This not only provides a seamless viewing experience but also gives the viewer the option to choose which images they want to focus on.
Create index.html file and copy code and paste code our layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Image Slide With thumbnails Image</h2>
<img src="image/img-1.jpg" id="main">
<div id="thumbnails">
<img src="image/img-2.jpg">
<img src="image/img-3.jpg">
<img src="image/img-4.jpg">
<img src="image/img-5-.jpg">
<img src="image/img-6.jpg">
</div>
</body>
<script src="script.js"></script>
</html>One of the key benefits of using an image slide with thumbnails is its ability to tell a visual story. By selecting a series of related images and arranging them in a specific order, the presenter can create a narrative that engages the audience and conveys a message or idea. This is particularly useful in presentations where the presenter wants to showcase a product or service, as the images can be strategically chosen and arranged to highlight its features and benefits.
Moreover, the use of thumbnails in an image slide allows for a more interactive experience. Instead of simply scrolling through a series of images, the viewer can actively participate by choosing which image they want to see next. This can also be useful in situations where the presenter wants to gather feedback or opinions from the audience, as they can easily navigate to a specific image and provide their thoughts.
Create style.css file and copy code and paste code our layout.
html {
background: #4ca1bd;
}
.shared{
box-shadow:2px 2px 10px 5px #b8b8b8;
border-radius:10px;
}
h2 {
text-align: center;
color: #fff;
text-transform: capitalize;
margin-top: 20px;
}
*{
transition: all 0.5s ease;
}
#thumbnails{
text-align:center;
}
img{
width:100px;
height:100px;
margin:10px;
cursor:pointer;
}
img{
@media only screen and (max-width:480px){
width:50px;
height:50px;
}
}
#main{
width:50%;
height:400px;
object-fit:cover;
display:block;
margin:20px auto;
}
.hidden{
opacity:0;
}Create script.js file and copy code and paste code our layout.
var thumbnails = document.getElementById("thumbnails")
var imgs = thumbnails.getElementsByTagName("img")
var main = document.getElementById("main")
var counter=0;
for(let i=0;i<imgs.length;i++){
let img=imgs[i]
img.addEventListener("click",function(){
main.src=this.src
})
}Conclusion
In conclusion, image slides with thumbnails are a versatile and engaging way to showcase a series of images. They not only provide a visually appealing experience but also allow for a more interactive and storytelling approach to presenting information. With proper planning and execution, image slides with thumbnails can be a powerful tool for any presenter or website designer.
[…] 2.Thumbnail Image Slider Using Html Css […]