owl carousel 2 testimonial slider example

index.html

<!-- TESTIMONIALS -->
<section class="testimonials">
	<div class="container">

      <div class="row">
        <div class="col-sm-12">
          <div id="customers-testimonials" class="owl-carousel">

            <!--TESTIMONIAL 1 -->
            <div class="item">
              <div class="shadow-effect">
                <img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="">
                <div class="item-details">
									<h5>Chicken for two Roasted <span><a href="https://google.com" target="_blank">Google.com</a></span></h5>
									<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
								</div>
              </div>
            </div>
            <!--END OF TESTIMONIAL 1 -->
            <!--TESTIMONIAL 2 -->
            <div class="item">
              <div class="shadow-effect">
                <img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="">
                <div class="item-details">
									<h5>Chicken for two Roasted <span><a href="http://stanwilliams.org" target="_blank">stanwilliams.org</a></span></h5>
									<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
								</div>
              </div>
            </div>
            <!--END OF TESTIMONIAL 2 -->
            <!--TESTIMONIAL 3 -->
            <div class="item">
              <div class="shadow-effect">
                <img class="img-responsive" src="https://image.freepik.com/free-photo/top-view-of-tasty-noodles-with-prawns_1203-1769.jpg" alt="">
                <div class="item-details">
									<h5>Chicken for two Roasted <span><a href="#">LINK</a></span></h5>
									<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
								</div>
              </div>
            </div>
            <!--END OF TESTIMONIAL 3 -->
            <!--TESTIMONIAL 4 -->
            <div class="item">
              <div class="shadow-effect">
                <img class="img-responsive" src="https://image.freepik.com/free-photo/burguer-with-garnish_1088-72.jpg" alt="">
                <div class="item-details">
									<h5>Chicken for two Roasted <span><a href="#">LINK</a></span></h5>
									<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
								</div>
              </div>
            </div>
            <!--END OF TESTIMONIAL 4 -->
            <!--TESTIMONIAL 5 -->
            <div class="item">
              <div class="shadow-effect">
                <img class="img-responsive" src="https://image.freepik.com/free-photo/delicious-pastry-with-chicken_1203-1616.jpg" alt="">
                <div class="item-details">
									<h5>Chicken for two Roasted <span><a href="#">LINK</a></span></h5>
									<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
								</div>
              </div>
            </div>
            <!--END OF TESTIMONIAL 5 -->
          </div>
        </div>
      </div>
      </div>
    </section>
    <!-- END OF TESTIMONIALS -->

owl-carousel-2-testimonial-slider-example.markdown

owl carousel 2 testimonial slider example

A Pen by Stan Williams on CodePen.

License.

script.js

jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel( {
		loop: true,
		center: true,
		items: 3,
		margin: 30,
		autoplay: true,
		dots:true,
    nav:true,
		autoplayTimeout: 8500,
		smartSpeed: 450,
  	navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
		responsive: {
			0: {
				items: 1
			},
			768: {
				items: 2
			},
			1170: {
				items: 3
			}
		}
	});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js"></script>

style.scss

.testimonials{
	background-color: #f33f02;
	position: relative;
	padding-top: 80px;
	&:after{
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 30%;
		background-color: #ddd;
	}
}
#customers-testimonials {
	.item-details{
		background-color: #333333;
		color: #fff;
		padding: 20px 10px;
		text-align: left;
		h5{
			margin: 0 0 15px;
			font-size: 18px;
			line-height: 18px;
			span{
				color: red;
				float:right;
				padding-right: 20px;
			}
		}
		p{
			font-size: 14px;
		}
	}
	.item {
			text-align: center;
			// padding: 20px;
			margin-bottom:80px;
	}
}
.owl-carousel .owl-nav [class*='owl-'] {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
  background-color: #D6D6D6;
}
.owl-carousel {
  position: relative;
}
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
  width: 50px;
  height: 50px;
	line-height: 50px;
	border-radius: 50%;
  position: absolute;
  top: 30%;
	font-size: 20px;
  color: #fff;
	border: 1px solid #ddd;
	text-align: center;
}
.owl-carousel .owl-prev {
  left: -70px;
}
.owl-carousel .owl-next {
  right: -70px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />