Skip to content

Instantly share code, notes, and snippets.

@mightyteja

mightyteja/index.html

Last active May 21, 2021 09:07
Show Gist options
  • Save mightyteja/5a11bc7b4fc19d598eae9fe9931f3301 to your computer and use it in GitHub Desktop.
Save mightyteja/5a11bc7b4fc19d598eae9fe9931f3301 to your computer and use it in GitHub Desktop.
Download ZIP
Nice Responsive Testimonial Carousel
Raw
index.html
<section>
<div class="customer-feedback">
<div class="container text-center">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div>
<h2 class="section-title">What Clients Say</h2>
</div>
</div><!-- /End col -->
</div><!-- /End row -->
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
<div class="feedback-slider">
<!-- slider item -->
<div class="feedback-slider-item">
<img src="//c2.staticflickr.com/8/7310/buddyicons/24846422@N06_r.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Lisa Redfern</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="https://res.cloudinary.com/hnmqik4yn/image/upload/c_fill,fl_force_strip,h_128,q_100,w_128/v1493982718/ah57hnfnwxkmsciwivve.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Cassi</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="4">
4
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Md Nahidul</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
</div><!-- /End feedback-slider -->
<!-- side thumbnail -->
<div class="feedback-slider-thumb hidden-xs">
<div class="thumb-prev">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
5
<i class="fa fa-star"></i>
</span>
</div>
<div class="thumb-next">
<span>
<img src="https://res.cloudinary.com/hnmqik4yn/image/upload/c_fill,fl_force_strip,h_128,q_100,w_128/v1493982718/ah57hnfnwxkmsciwivve.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
4
<i class="fa fa-star"></i>
</span>
</div>
</div>
<!-- /side thumbnail -->
</div><!-- /End col -->
</div><!-- /End row -->
</div><!-- /End container -->
</div><!-- /End customer-feedback -->
</section>
Raw
script.js
jQuery(document).ready(function($) {
var feedbackSlider = jQuery('.feedback-slider');
feedbackSlider.owlCarousel({
items: 1,
nav: true,
dots: true,
autoplay: true,
loop: true,
mouseDrag: true,
touchDrag: true,
navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"],
responsive:{
// breakpoint from 767 up
767:{
nav: true,
dots: false
}
}
});
feedbackSlider.on("translate.owl.carousel", function(){
$(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
});
feedbackSlider.on("translated.owl.carousel", function(){
$(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
});
feedbackSlider.on('changed.owl.carousel', function(property) {
var current = property.item.index;
var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
$('.thumb-prev').find('img').attr('src', prevThumb);
$('.thumb-next').find('img').attr('src', nextThumb);
$('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
$('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
});
$('.thumb-next').on('click', function() {
feedbackSlider.trigger('next.owl.carousel', [300]);
return false;
});
$('.thumb-prev').on('click', function() {
feedbackSlider.trigger('prev.owl.carousel', [300]);
return false;
});
}); //end ready
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://thenahid.com/owl.carousel.min.js"></script>
Raw
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
body {
font-family: 'Roboto Slab', serif;
font-size: 15px;
line-height: 1.67;
color: #444;
padding: 60px 0;
}
.section-title {
font-size: 28px;
margin-bottom: 20px;
padding-bottom: 20px;
font-weight: 400;
display: inline-block;
position: relative;
}
.section-title:after,
.section-title:before {
content: '';
position: absolute;
bottom: 0;
}
.section-title:after {
height: 2px;
background-color: rgba(252, 92, 15, 0.46);
left: 25%;
right: 25%;
}
.section-title:before {
width: 15px;
height: 15px;
border: 3px solid #fff;
background-color: #fc5c0f;
left: 50%;
transform: translatex(-50%);
bottom: -6px;
z-index: 9;
border-radius: 50%;
}
/* CAROUSEL STARTS */
.customer-feedback .owl-item img {
width: 85px;
height: 85px;
}
.feedback-slider-item {
position: relative;
padding: 60px;
margin-top: -40px;
}
.customer-name {
margin-top: 15px;
margin-bottom: 25px;
font-size: 20px;
font-weight: 500;
}
.feedback-slider-item p {
line-height: 1.875;
}
.customer-rating {
background-color: #eee;
border: 3px solid #fff;
color: rgba(1, 1, 1, 0.702);
font-weight: 700;
border-radius: 50%;
position: absolute;
width: 47px;
height: 47px;
line-height: 44px;
font-size: 15px;
right: 0;
top: 77px;
text-indent: -3px;
}
.thumb-prev .customer-rating {
top: -20px;
left: 0;
right: auto;
}
.thumb-next .customer-rating {
top: -20px;
right: 0;
}
.customer-rating i {
color: rgb(251, 90, 13);
position: absolute;
top: 10px;
right: 5px;
font-weight: 600;
font-size: 12px;
}
/* GREY BACKGROUND COLOR OF THE ACTIVE SLIDER */
.feedback-slider-item:after {
content: '';
position: absolute;
left: 20px;
right: 20px;
bottom: 0;
top: 103px;
background-color: #f6f6f6;
border: 1px solid rgba(251, 90, 13, .1);
border-radius: 10px;
z-index: -1;
}
.thumb-prev,
.thumb-next {
position: absolute;
z-index: 99;
top: 45%;
width: 98px;
height: 98px;
left: -90px;
cursor: pointer;
-webkit-transition: all .3s;
transition: all .3s;
}
.thumb-next {
left: auto;
right: -90px;
}
.feedback-slider-thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
.feedback-slider-thumb:hover {
opacity: .8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.customer-feedback .owl-nav [class*="owl-"] {
position: relative;
display: inline-block;
bottom: 45px;
transition: all .2s ease-in;
}
.customer-feedback .owl-nav i {
background-color: transparent;
color: rgb(251, 90, 13);
font-size: 25px;
}
.customer-feedback .owl-prev {
left: -15px;
}
.customer-feedback .owl-prev:hover {
left: -20px;
}
.customer-feedback .owl-next {
right: -15px;
}
.customer-feedback .owl-next:hover {
right: -20px;
}
/* DOTS */
.customer-feedback .owl-dots {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 35px;
}
.customer-feedback .owl-dot {
display: inline-block;
}
.customer-feedback .owl-dots .owl-dot span {
width: 11px;
height: 11px;
margin: 0 5px;
background: #fff;
border: 1px solid rgb(251, 90, 13);
display: block;
-webkit-backface-visibility: visible;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
border-radius: 50%;
}
.customer-feedback .owl-dots .owl-dot.active span {
background-color: rgb(251, 90, 13);
}
/* RESPONSIVE */
@media screen and (max-width: 767px) {
.feedback-slider-item:after {
left: 30px;
right: 30px;
}
.customer-feedback .owl-nav [class*="owl-"] {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top: 45px;
bottom: auto;
}
.customer-feedback .owl-prev {
left: 0;
}
.customer-feedback .owl-next {
right: 0;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet" />
<link href="https://thenahid.com/owl.carousel.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment