Banner Image Slider using only HTML and CSS

This blog is great for making sliders with CSS. This video is one of my favorite videos. This video will be very useful if you want to create a banner slider with CSS

Video tutorial of CSS Banner Slider | How to Create Slider Using HTML and CSS

This video is great for making sliders with CSS. This video is one of my favorite videos. This video will be very useful if you want to create a banner slider with CSS

CSS Banner Slider | How to Create Slider Using HTML and CSS [Source Codes]

This source code can help you to create CSS Banner Slider | How to Create Slider Using HTML and CSS

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="banner_wrapper">
	<div class="next_arrow"></div>
	<div class="prev_arrow"></div>
	<div class="banner">
		<input type="radio" name="xx">
		<input type="radio" name="xx" id="x1">
		<label for="x3"></label>
		<div class="banner_box">
			<img src="images/pic1.jpg" alt="">
		</div>

		<input type="radio" name="xx">
		<input type="radio" name="xx" id="x2">
		<label for="x1"></label>
		<div class="banner_box">
			<img src="images/pic2.jpg" alt="">
		</div>

		<input type="radio" name="xx">
		<input type="radio" name="xx" id="x3">
		<label for="x2"></label>
		<div class="banner_box">
			<img src="images/pic3.jpg" alt="">
		</div>


	</div>
</div>






</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	background: #fff;
	margin: 0;
}
img{
	max-width: 100%;
}

.banner_wrapper{
	position: relative;
}
.next_arrow{
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
	height: 100%;
	z-index: 10;
	pointer-events: none;
	background: url('../images/next.png') center center no-repeat;
	background-size: 60%;
}
.prev_arrow{
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100%;
	z-index: 10;
	pointer-events: none;
	background: url('../images/prev.png') center center no-repeat;
	background-size: 60%;
}
.banner{
	max-width: 100%;
	max-height: 100vh;
	overflow: hidden;
	position: relative;
}
.banner_box{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 0.3s ease-in-out;
}
.banner_box:first-of-type{
	position: relative;
	opacity: 1;
	z-index: 1;
}
input{
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
	height: 100%;
	cursor: pointer;
	opacity: 0;
}
label{
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100%;
	cursor: pointer;
	opacity: 0;
}
input+input{
	right: auto;
	left: 0;
}
input:first-of-type,
label:first-of-type{
	z-index: 3;
}

input:checked{
	z-index: 0;
}
input:checked + input+label+.banner_box+input{
	z-index: 4
}
input:checked + input+label+.banner_box{
	z-index: 0;
	opacity: 0;
}
input:checked + input+label+.banner_box+input+input+label{
	z-index: 4;
}
input:checked + input+label+.banner_box+input+input+label+.banner_box{
	z-index: 2;
	opacity: 1;
}

input+input:checked + label{
	z-index: 4;
}
input+input:checked + label+.banner_box{
	z-index: 2;
	opacity: 1;
}

Banner Image Slider using only HTML and CSS

Video tutorial of CSS Banner Slider | How to Create Slider Using HTML and CSS

CSS Banner Slider | How to Create Slider Using HTML and CSS [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery