Pure CSS Responsive Testimonial Slider

byCodingFlicks -November 11, 2021

0

Hello and welcome to this blog. Today we will learn how to make a responsive testimonial page using only CSS. This blog got a bunch of other snippets on CSS animation examples, javascript, sliders, responsive website design, and so on. Explore those by clicking the load more button on the homepage. For this project, I have provided the video demo below.

I hope you have watched the video demo and got some idea about the project. Around us, we see many testimonial sliders that have been built either with JavaScript or with JQuery. Today, we will make a responsive Testimonial Slider just using CSS. You may have used CSS Image Slider before. This testimonial slider has been made using this concept.

First, I took a div and named its wrapper. It will contain all the components of the slider. Such as the image of the reviewer, review text, and pagination. Then five input radio elements are taken which, we will be pagination. Then we will take another div where the main contents of the slider will remain. We will name it 'mainSlider'. Inside this 'mainSlider' we will give five 'content' div. Each 'content' div will contain an image, a paragraph tag, and an H2 tag.

Let's come to the CSS part. First, We will give a margin of Zero to the Universal Selector to eliminate the default margin of the project. Then with the help of CSS Flexbox, we will style every element of the project. We will give the wrapper div an 'overflow: hidden' style so that, the slider does not go outside the viewport. Then give 'mainSlider' div a 500% width. This slider will not be automatic. We will get the slider effect by clicking the dots. When Each dot will be checked or clicked the content will move forward and backward.

You May Like this:

Responsive CSS Testimonials slider [ Source Code ]:

Create one HTML file and a CSS file. Please copy the code provided below and paste them into your project.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<title>Pure CSS Responsive Testimonial Slider</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<input checked="checked" class="dots" name="testi" title="slide1" type="radio"> <input class="dots" name="testi" title="slide2" type="radio"> <input class="dots" name="testi" title="slide3" type="radio"> <input class="dots" name="testi" title="slide4" type="radio"> <input class="dots" name="testi" title="slide5" type="radio">
		<div class="mainSlider">
			<div class="content">
				<div class="img-area"><img alt="" src="https://images.pexels.com/photos/1317712/pexels-photo-1317712.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, nisi, eius. Consequatur, et eum fuga debitis, incidunt quia!</p>
				<h2>Someone Famous 1</h2>
			</div>
			<div class="content">
				<div class="img-area"><img alt="" src="https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, nisi, eius. Consequatur, et eum fuga debitis, incidunt quia!</p>
				<h2>Someone Famous 2</h2>
			</div>
			<div class="content">
				<div class="img-area"><img alt="" src="https://images.pexels.com/photos/3190334/pexels-photo-3190334.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, nisi, eius. Consequatur, et eum fuga debitis, incidunt quia!</p>
				<h2>Someone Famous 3</h2>
			</div>
			<div class="content">
				<div class="img-area"><img alt="" src="https://images.pexels.com/photos/3525908/pexels-photo-3525908.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, nisi, eius. Consequatur, et eum fuga debitis, incidunt quia!</p>
				<h2>Someone Famous 4</h2>
			</div>
			<div class="content">
				<div class="img-area"><img alt="" src="https://images.pexels.com/photos/9968247/pexels-photo-9968247.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, nisi, eius. Consequatur, et eum fuga debitis, incidunt quia!</p>
				<h2>Someone Famous 5</h2>
			</div>
		</div>
	</div>
</body>
</html>

ADD CSS:

*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
}
html, body {
	height: 100%;
}
body {
	background: darkorange;
}
.wrapper {
	background: darkorange;
	height: 450px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-flow: row nowrap;
	-webkit-box-align: end;
	align-items: flex-end;
	-webkit-box-pack: center;
	justify-content: center;
	margin: 67px 0 0;
}
.mainSlider {
	position: absolute;
	top: 80px;
	left: 0;
	width: 500%;
	height: auto;
	transition: left 0.4s;
	display: flex;
	flex-flow: row nowrap;
}
.content {
	height: 100%;
	text-align: center;
	display: flex;
	-webkit-box-flex: 1;
	flex: 1;
	flex-flow: column nowrap;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}
.content h2 {
	font-size: 18px;
	color: #fff;
	font-family: montserrat;
}
.content p {
	font-size: 30px;
	font-family: cookie;
	line-height: 1.7;
	color: #fff;
	margin-top: -20px;
	margin-bottom: 20px;
	max-width: 750px;
}
.img-area img {
	width: 100%;
}
.img-area {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-block;
	margin-bottom: 40px;
	border: 5px solid #fff;
}
.dots {
	width: 12px;
	height: 12px;
	margin: 15px 10px;
	z-index: 10;
	outline: 10px solid white;
	outline-offset: -6px;
	cursor: pointer;
	appearance: none;
	backface-visibility: hidden;
	border-radius: 50%;
}
.dots:checked:nth-of-type(1)~.mainSlider {
	left: 0%;
}
.dots:checked:nth-of-type(2)~.mainSlider {
	left: -100%;
}
.dots:checked:nth-of-type(3)~.mainSlider {
	left: -200%;
}
.dots:checked:nth-of-type(4)~.mainSlider {
	left: -300%;
}
.dots:checked:nth-of-type(5)~.mainSlider {
	left: -400%;
}

I hope you find this helpful. If you are having a problem with the code above then download the source code from the button below. Please follow us on our social media profiles to stay connected with this blog. Thank you for visiting the blog.

DOWNLOAD CODE

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