<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nahidul/pen/yPzwMK?depth=everything&order=popularity&page=35&q=thumbnail&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://www.thenahid.com/wp-content/themes/twentyseventeen/js/owl.carousel.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<style class="cp-pen-styles">* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
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%;
-webkit-transform: translatex(-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;
-webkit-transition: all .2s ease-in;
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%;
-webkit-transform: translateX(-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%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: 45px;
bottom: auto;
}
.customer-feedback .owl-prev {
left: 0;
}
.customer-feedback .owl-next {
right: 0;
}
}</style></head><body>
<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="//c2.staticflickr.com/2/1558/buddyicons/37689138@N07_r.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="//c2.staticflickr.com/2/1558/buddyicons/37689138@N07_r.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>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script><script src='https://www.thenahid.com/wp-content/themes/twentyseventeen/js/owl.carousel.min.js'></script>
<script >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
//# sourceURL=pen.js
</script>
</body></html>
