Responsive Testimonial Slider v1.0

Developer
David Klotz
Size
3,802 Kb
Views
8,096
  1. Responsive Testimonial Slider v1.0 Previews
  2. Responsive Testimonial Slider v1.0 HTML Codes
  3. Responsive Testimonial Slider v1.0 CSS Codes
  4. Responsive Testimonial Slider v1.0 JS Codes

How do I make an responsive testimonial slider v1.0?

Adapted from https://codyhouse.co/gem/client-testimonials-carousel/. What is a responsive testimonial slider v1.0? How do you make a responsive testimonial slider v1.0? This script and codes were developed by David Klotz on 23 January 2023, Monday.

Responsive Testimonial Slider v1.0 Previews
IQ Test

Responsive Testimonial Slider v1.0 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Testimonial Slider v1.0</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scaleable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,300italic,600,600italic,700,700italic,800,800italic'>
<link rel='stylesheet prefetch' href='https://dl.dropboxusercontent.com/u/97609687/codepen/style.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="testimonial-container">	<div class="dk-container">	<div class="cd-testimonials-wrapper cd-container">	<h2>Testimonials</h2>	<ul class="cd-testimonials">	<li>	<div class="testimonial-content">	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>	<div class="cd-author">	<img src="http://placehold.it/350x350/222222/222222" alt="Author image">	<ul class="cd-author-info">	<li>Lorem<strong>Ipsum</strong><br><span>@twitterhandle</span></li>	<li></li>	</ul>	</div>	</div>	</li>	<li>	<div class="testimonial-content">	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum.</p>	<div class="cd-author">	<img src="http://placehold.it/350x350/222222/222222" alt="Author image">	<ul class="cd-author-info">	<li>Lorem<strong>Ipsum</strong><br><span>@twitterhandle</span></li>	<li></li>	</ul>	</div>	</div>	</li>	<li>	<div class="testimonial-content">	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum.</p>	<div class="cd-author">	<img src="http://placehold.it/350x350/222222/222222" alt="Author image">	<ul class="cd-author-info">	<li>Lorem<strong>Ipsum</strong><br><span>@twitterhandle</span></li>	<li></li>	</ul>	</div>	</div>	</li>	</ul>	</div>	<!-- cd-testimonials -->	</div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Testimonial Slider v1.0 - Script Codes CSS Codes

.testimonial-container {	background-color: rgba(245, 245, 245, 1);	width: 100%;
}
.cd-testimonials-wrapper {	position: relative;	width: 100%;	max-width: 100%;	margin: 0 auto;	background-color: rgba(245, 245, 245, 1);	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale;	padding: 100px 0px 40px;	z-index: 1;
}
.cd-testimonials-wrapper h2 {	text-align: center;	position: absolute;	width: 100%;	top: 60px;	margin: 0 auto;
}
@media only screen and (min-width: 768px) {	.cd-testimonials-wrapper {	padding: 170px 0px 60px;	}	.cd-testimonials-wrapper h2 {	text-align: center;	position: absolute;	width: 100%;	top: 100px;	margin: 0 auto;	}
}
.testimonial-content {	max-width: 1000px;	width: 80%;	margin: 0 auto 30px auto;
}
.cd-testimonials {	color: rgba(130, 132, 139, 1);	text-align: center;	list-style: none;	padding: 0;	margin: 0;
}
.cd-testimonials > li {	position: absolute;	opacity: 0;
}
.cd-testimonials > li:first-child {	position: relative;	opacity: 1;
}
.testimonial-content p {	font-style: italic;	line-height: 1.4;	margin-bottom: 1em;	padding: 0 14px;
}
@media only screen and (min-width: 768px) {	.testimonial-content p {	font-size: 20px;	font-family: 'Open Sans';	}
}
@media only screen and (min-width: 1170px) {	.testimonial-content p {	font-size: 24px;	line-height: 1.6;	}
}
.cd-author-info span p {	display: inline-block;	font-size: 14px;	padding-left: 0;
}
.cd-author-info span p a {	color: rgba(126, 129, 136, 1);
}
.cd-author img,
.cd-author .cd-author-info {	display: inline-block;	vertical-align: top;
}
.cd-author img {	width: 40px;	height: 40px;	border-radius: 50%;	margin-right: 5px;
}
.cd-author .cd-author-info {	text-align: left;	line-height: 1
}
.cd-author .cd-author-info li:first-child {	font-size: 14px;	margin-top: 4px;
}
.cd-author .cd-author-info li:last-child {	font-size: 12px;	color: #6b6b70;
}
ul.cd-author-info {	list-style: none;
}
ul.cd-author-info li span:before {	font-family: 'FontAwesome';	content: '\f099';	font-size: 24px;	display: inline-block;	position: absolute;	margin-top: 2px;	font-style: normal;	margin-left: -30px;
}
ul.cd-author-info li span {	font-size: 14px;	padding-left: 30px;	line-height: 24px;	font-family: 'Open Sans', sans-serif;	font-style: italic;	font-weight: 300;
}
@media only screen and (min-width: 768px) {	.cd-author img {	width: 58px;	height: 58px;	}	.cd-author .cd-author-info {	line-height: 1.4;	}	.cd-author .cd-author-info li:first-child {	font-size: 18px;	}
}
@media only screen and (max-width: 320px) {}
.flex-direction-nav a {	text-decoration: none;	display: block;	width: 50px;	height: 100%;	margin: 0px 0 0;	position: absolute;	z-index: 9999;	top: 0;	overflow: hidden;	opacity: 1;	background: rgba(245, 245, 245, 1);	cursor: pointer;	color: rgba(255, 255, 255, .5);	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);	-webkit-transition: all 0.3s ease-in-out;	-moz-transition: all 0.3s ease-in-out;	-ms-transition: all 0.3s ease-in-out;	-o-transition: all 0.3s ease-in-out;	transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {	font-size: 40px;	content: url('https://dl.dropboxusercontent.com/u/97609687/codepen/chevronleft.svg');	position: absolute;	display: block;	top: 50%;	padding: 14px 10px 14px 10px;	-webkit-transform: translateY(-50%);	-moz-transform: translateY(-50%);	-ms-transform: translateY(-50%);	transform: translateY(-50%);
}
.flex-direction-nav a.flex-next:before {	content: url('https://dl.dropboxusercontent.com/u/97609687/codepen/chevronright.svg');	padding: 14px 20px 14px 10px;
}
.flex-direction-nav .flex-prev {	left: 0px;
}
.flex-direction-nav .flex-next {	right: 0px;	text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {	opacity: 1;	left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {	opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {	opacity: 1;	right: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {	opacity: 1;
}
.flex-direction-nav .flex-disabled {	opacity: 0!important;	filter: alpha(opacity=0);	cursor: default;
}
.flex-control-paging li a {	width: 6px;	height: 6px;	display: block;	background: #666;	background: rgba(0, 0, 0, 0.4);	cursor: pointer;	text-indent: -9999px;	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);	-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);	-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);	-webkit-border-radius: 20px;	-moz-border-radius: 20px;	border-radius: 20px;
}
.flex-control-paging li a:hover {	background: #333;	background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {	background: #000;	background: rgba(2, 23, 31, 1);	cursor: default;
}
.flex-control-nav {	bottom: 30px;	position: absolute;	margin: 0 auto;	padding: 0;	text-align: center;	width: 100%;
}
.flex-control-nav li {	display: inline-block;	padding: 0px 5px 0px 5px;
}
@media screen and (max-width: 767px) {	.flex-direction-nav a {	width: 30px;	}	.flex-direction-nav a:before {	visibility: hidden;	}	.flex-direction-nav a:before {	padding: 14px 0px 10px 0px;	}	.flex-direction-nav .flex-prev {	left: 0px;	}	.flex-direction-nav .flex-next {	right: 0px;	text-align: right;	}	.flexslider:hover .flex-direction-nav .flex-prev {	opacity: 1;	left: 0px;	}	.flexslider:hover .flex-direction-nav .flex-prev:hover {	opacity: 1;	}	.flexslider:hover .flex-direction-nav .flex-next {	opacity: 1;	right: 0px;	}	.flex-direction-nav {	visibility: hidden;	}
}

Responsive Testimonial Slider v1.0 - Script Codes JS Codes

jQuery(document).ready(function($) {	//create the slider	$('.cd-testimonials-wrapper').flexslider({	selector: ".cd-testimonials > li",	animation: "slide",	controlNav: true,	slideshow: false,	smoothHeight: true,	start: function() {	$('.cd-testimonials').children('li').css({	'opacity': 1,	'position': 'relative'	});	}	});
});
Responsive Testimonial Slider v1.0 - Script Codes
Responsive Testimonial Slider v1.0 - Script Codes
Home Page Home
Developer David Klotz
Username dkdesign
Uploaded January 23, 2023
Rating 3.5
Size 3,802 Kb
Views 8,096
Do you need developer help for Responsive Testimonial Slider v1.0?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David Klotz (dkdesign) Script Codes
Name
A Pen by David Klotz
Flexbox Media Object
Tout box hover content overlay
CSS Transitions Transforms Reveal v1.0
Tout Pattern
My Starter Kit For Codepen
Flexbox Layout
Basic Fullscreen Hero
Tout with hover content
Bourbon refill accordion tabs
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!