Responsive Creative Testimonials

Free Code Snippet for Responsive Creative Testimonials with HTML, CSS, JS based on Bootstrap and OWL Carousel.

Instruction:
This Testimonials Carousel is based on OWL Carousel. To make this working as demo, please make sure you have OWL Carousel (HTML/CSS) included in your project.

CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<style type="text/css" media="screen">
.testimonials {
background: #f8f8f8;
padding-bottom: 80px; 
}
.testimonials a{
color: #ff3bff;
text-decoration: none;
}
.testimonials #testimonials .item {
margin: 0 30px; 
}
.testimonials #testimonials .item img{
max-width: 100%;
}
.testimonials #testimonials .item .single:hover .feedback {
background: #ff3bff;
border-color: #222 !important; 
}
.testimonials #testimonials .item .single:hover .feedback p {
color: rgba(255, 255, 255, 0.7); 
}
.testimonials #testimonials .item .single:hover .feedback a {
color: white; 
}
.testimonials #testimonials .item .single:hover .feedback a:hover {
color: rgba(255, 255, 255, 0.9); 
}
.testimonials #testimonials .item .single:hover .feedback.top:after {
border-top-color: #ff3bff; 
}
.testimonials #testimonials .item .single:hover .feedback.bottom:after {
border-bottom-color: #ff3bff; 
}
.testimonials #testimonials .item .single .feedback {
position: relative;
background: #222;
padding: 30px;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-ms-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out; 
}
.testimonials #testimonials .item .single .feedback a {
text-transform: uppercase;
font-size: 14px; 
}
.testimonials #testimonials .item .single .feedback a:hover {
color: #ff3bff; 
}
.testimonials #testimonials .item .single .feedback p {
color: #999;
font-size: 14px; 
}
.testimonials #testimonials .item .single .feedback.top {
margin-bottom: 30px;
border-top: 4px solid #ff3bff; 
}
.testimonials #testimonials .item .single .feedback.top:after {
content: '';
position: absolute;
border-top: 15px solid #222;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
left: 30px;
bottom: -15px;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-ms-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out; 
}
.testimonials #testimonials .item .single .feedback.bottom {
margin-top: 30px;
border-bottom: 4px solid #ff3bff; 
}
.testimonials #testimonials .item .single .feedback.bottom:after {
content: '';
position: absolute;
border-bottom: 15px solid #222;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
left: 30px;
top: -15px;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-ms-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out; 
}
.testimonials .owl-theme .owl-controls {
margin-top: 30px; 
text-align: center;
}
.testimonials .owl-theme .owl-controls .owl-page{
display: inline-block;
}
.testimonials .owl-theme .owl-controls .owl-page span {
width: 20px;
height: 20px;
display: block;
background: transparent;
border: 1px solid #ff3bff;
opacity: 1; 
}
.testimonials .owl-theme .owl-controls .owl-page.active span, .testimonials .owl-theme .owl-controls.clickable .owl-page:hover span {
background: #ff3bff; 
}
</style>

HTML

<section class="testimonials">
<div class="container">
<div class="row">
<div id="testimonials" class="owl-carousel owl-theme">     
<div class="item">
<div class="single">
<div class="feedback top">
<p>CSS3 Testimonials Slider. People also love. HTML Snippets for Twitter Boostrap framework. Bootstrap Testimonials with Carousel Example.</p>
<a href="" title="">Slider</a>
</div>
<div class="image">
<img src="images/client1.jpg" alt="">
</div>        
</div>
</div>
<div class="item">
<div class="single">
<div class="image">
<img src="images/client2.jpg" alt="">
</div>
<div class="feedback bottom">
<p>Customer Testimonials Widget for your website to help drive sales! Adds client customer testimonials or rated reviews.</p>
<a href="" title="">Next Bootstrap</a>
</div>
</div>
</div>

<div class="item">
<div class="single">

<div class="feedback top">
<p>Bootstrap snippet Clients testimonial with photo HTML CSS JS. Easy to use code and modern responsive design. </p>
<a href="" title="">OWL Carousel</a>
</div>
<div class="image">
<img src="images/client3.jpg" alt="">
</div>
</div>
</div>

<div class="item">
<div class="single">
<div class="image">
<img src="images/client2.jpg" alt="">
</div>
<div class="feedback bottom">
<p>Awesome Bootstrap HTML CSS JS Snippet on Next Bootstrap to help you to develop your awesome project faster and quicker.</p>
<a href="" title="">Bootstrap</a>
</div>
</div>
</div>

<div class="item">
<div class="single">

<div class="feedback top">
<p>Responsive simple Testimonials in carousel using most popular carousel plugin OWL Carousel and bootstrap framework.</p>
<a href="" title="">Testimonials</a>
</div>
<div class="image">
<img src="images/client1.jpg" alt="">
</div>
</div>
</div>

<div class="item">
<div class="single">
<div class="image">
<img src="images/client2.jpg" alt="">
</div>
<div class="feedback bottom">
<p>Code example of Responsive simple Testimonials  using HTML, Javascript, jQuery, and CSS based on Twitter Bootstrap.</p>
<a href="" title="">Code Snippets</a>
</div>
</div>
</div>

<div class="item">
<div class="single">

<div class="feedback top">
<p>HTML Snippets for Twitter Boostrap framework. Bootstrap Responsive simple Testimonials  Example. </p>
<a href="" title="">Free Codes</a>
</div>
<div class="image">
<img src="images/client3.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Javascript

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#testimonials").owlCarousel({
        autoPlay: 6000, //Set AutoPlay to 6 seconds
        items : 4,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });
});
</script>