Pure HTML and CSS slider | CSS Image Slider

byCodingFlicks -September 20, 2020

0

Pure HTML and CSS slider with thumbnails

Visual content plays a vital role in the world of web design. It helps to capture user attention and increase user experience. An image slider or slideshow is an effective way to showcase multiple images of that website. Image slider or slideshow with thumbnails shows the images in a interactive and compact manner. In this blog post, we will learn how to create a CSS-based image slideshow with thumbnails. Check out the video tutorial below, where we walk you through each step of creating this CSS snippet

Video Tutorial:

We hope you have seen this video tutorial on CSS-based image slideshow with thumbnails. An image slider or slideshow allows users to view a series of images in a slideshow format. The thumbnails which is a smaller versions of the images, are displayed below or beside the main slideshow. It enables user to easily navigate through the images by clicking on these thumbnails. This type of slider is used in web design, to enhance User experience. It is also used for space efficiency and improved navigation. We haven't used JavaScript for this snippet.

In the HTML structure, we have a container div that holds the main slideshow images and the related thumbnail images. Each image in the slideshow is paired with a radio button and a label. The radio buttons act as controls for selecting which image to display, while the labels serve as clickable thumbnails. The main photos are positioned absolutely within the container. It ensures only one image is shown at a time. The thumbnails of the slider are styled with a border and positioned below the main slideshow. The :checked pseudo-class is used to detect which radio button is selected. It triggers the corresponding image to display.

You May also like:

HTML and CSS slider with thumbnails [ Source Code ]:

First, create an HTML and CSS file and paste the code given below. After saving, open the snippet in your browser and tweak it however you like. If you want, you can also download the code directly using the download button below this blog post.

HTML

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Image Slider with thumbnails</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
		<input id="box1" name="animate" type="radio"> 
		<label for="box1">
            <img src="img/1.jpg" width="80">
        </label>
		<img src="img/1.jpg">

		<input checked="checked" id="box2" name="animate" type="radio"> 
		<label for="box2">
            <img src="img/2.jpg" width="80">
        </label>
		<img src="img/2.jpg">

		<input id="box3" name="animate" type="radio"> 
		<label for="box3">
			<img src="img/3.jpg" width="80">
		</label>
        <img src="img/3.jpg">

		<input id="box4" name="animate" type="radio"> 
		<label for="box4">
			<img src="img/4.jpg" width="80">
		</label>
		<img src="img/4.jpg">

	</div>
</body>
</html>

CSS

  body {
	background: #ddd; 
}
.box {
	width: 1000px;
	position: relative;
	padding-top: 320px;
	margin: 110px auto;
	height: 100px;
	box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.8);
}
.box>img {
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.5s;
	width: 100%;
	height: 420px;
}
.box input[name='animate'] {
	display: none;
}
.box label {
	margin: 120px auto auto 120px;
	border: 5px solid #fff;
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	opacity: 0.6;
}
.box label img {
	display: block;
}
.box input[name='animate']:checked+label {
	border-color: #000;
	opacity: 1;
}
.box input[name='animate']~img {
	opacity: 0;
	transform: scale(1.1);
}
.box input[name='animate']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}

CSS-based image slideshow with thumbnails helps to enhance the user experience, improve navigation, and make your content more visually appealing. You can add these types of slideshow to your website to showcase the project images. We hope you have downloaded the code. Thanks for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.