How to make Card Slider in HTML CSS | Owl Carousel

October 16, 2022October 16, 2022 M-SoftTech 0 Comments

hello friends welcome to m-Softech. today I will teach you how to make a carousel slider using of html CSS only .you have seen many carousel slider in internet but they are make on JavaScript. this slider is totally different because this slider make only html CSS not using JavaScript. this slider is working on same as well JavaScript slider. so let’s start our article. first we create two file one is html file other one CSS file. and link CSS file in html document. In html document we create a div that’s class name is slider. I write all slider code inside this slider div. and then i create five input radio type that’s five radio type name is same testimonials. but that’s all radio type id is different.

You May Also Like This:-

Vertical Animated Navbar Using HTML CSS & JQUERY

How to make a admin dashboard using html css

HTML CODE

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="slider">
	<input type="radio" name="testimonial" id="t-1">
	<input type="radio" name="testimonial" id="t-2">
	<input type="radio" name="testimonial" id="t-3" checked>
	<input type="radio" name="testimonial" id="t-4">
	<input type="radio" name="testimonial" id="t-5">
	<div class="testimonials">
		<label class="item" for="t-1">
			<h1>1</h2>
		</label>
		<label class="item" for="t-2">
			<h1>2</h2>
		</label>
		<label class="item" for="t-3">
			<h1>3</h2>
		</label>
		<label class="item" for="t-4">
			<h1>4</h2>
		</label>
		<label class="item" for="t-5">
			<h1>5</h2>
		</label>
	</div>
	<br/>
	<div class="dots">
		<label for="t-1"></label>
		<label for="t-2"></label>
		<label for="t-3"></label>
		<label for="t-4"></label>
		<label for="t-5"></label>
	</div>
</div>

</body>
</html>

CSS CODE

body{
	margin: 0;
	background: #282d34;
	color: white;
	font-family: sans-serif;;
	display: flex;
	align-items: center;
	min-height: 100vh;
}
.slider{width: 100%}
.slider input{display: none;}
.testimonials{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 350px;
	perspective: 1000px;
	overflow: hidden;
}
.testimonials .item{
	width: 300px;
	padding: 30px;
	border-radius: 5px;
	background-color: #21262d;
	position: absolute;
	border:3px solid white;
	top: 0;
	box-sizing: border-box;
	text-align: center;
	transition: transform 0.4s;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	user-select: none;
	cursor: pointer;
}
.testimonials .item h1{font-size: 114px; color: white;}
.dots{display: flex; justify-content: center;align-items: center;}
.dots label{
	height: 5px;
	width: 5px;
	border-radius: 50%;
	cursor: pointer;
	background-color: #413B52;
	margin: 7px;
	transition-duration: 0.2s;
}
#t-1:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-4"],
#t-5:checked ~ .dots label[for="t-5"]{
	transform: scale(2);
	background-color: #fff;
	box-shadow: 0px 0px 0px 3px #dddddd24;
}

#t-1:checked ~ .dots label[for="t-2"],
#t-2:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-3"],
#t-3:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-4"],
#t-4:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-5"],
#t-5:checked ~ .dots label[for="t-4"]{
	transform: scale(1.5);
}

#t-1:checked ~ .testimonials label[for="t-3"],
#t-2:checked ~ .testimonials label[for="t-4"],
#t-3:checked ~ .testimonials label[for="t-5"],
#t-4:checked ~ .testimonials label[for="t-1"],
#t-5:checked ~ .testimonials label[for="t-2"]{
	transform: translate3d(600px, 0, -180px) rotateY(-25deg);
	z-index: 2;
}

#t-1:checked ~ .testimonials label[for="t-2"],
#t-2:checked ~ .testimonials label[for="t-3"],
#t-3:checked ~ .testimonials label[for="t-4"],
#t-4:checked ~ .testimonials label[for="t-5"],
#t-5:checked ~ .testimonials label[for="t-1"]{
	transform: translate3d(300px, 0, -90px) rotateY(-15deg);
	z-index: 3;
}

#t-2:checked ~ .testimonials label[for="t-1"],
#t-3:checked ~ .testimonials label[for="t-2"],
#t-4:checked ~ .testimonials label[for="t-3"],
#t-5:checked ~ .testimonials label[for="t-4"],
#t-1:checked ~ .testimonials label[for="t-5"]{
	transform: translate3d(-300px, 0, -90px) rotateY(15deg);
	z-index: 3;
}

#t-3:checked ~ .testimonials label[for="t-1"],
#t-4:checked ~ .testimonials label[for="t-2"],
#t-5:checked ~ .testimonials label[for="t-3"],
#t-2:checked ~ .testimonials label[for="t-5"],
#t-1:checked ~ .testimonials label[for="t-4"]{
	transform: translate3d(-600px, 0, -180px) rotateY(25deg);
	
}

#t-1:checked ~ .testimonials label[for="t-1"],
#t-2:checked ~ .testimonials label[for="t-2"],
#t-3:checked ~ .testimonials label[for="t-3"],
#t-4:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-5"]{
	
	z-index: 4;
}

If you have any problem to understand this code. Then you please watch this video tutorial.