owl carousel 2 testimonial slider example

In this example below you will see how to do a owl carousel 2 testimonial slider example with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by shamim539, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shamim539 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>owl carousel 2 testimonial slider example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <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://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- 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>$21</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>$21</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>$21</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>$21</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>$21</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 -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/shamim539/owl-carousel-2-testimonial-slider-example-GNqLda */
.testimonials {
  background-color: #f33f02;
  position: relative;
  padding-top: 80px;
}
.testimonials: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;
}
#customers-testimonials .item-details h5 {
  margin: 0 0 15px;
  font-size: 18px;
  line-height: 18px;
}
#customers-testimonials .item-details h5 span {
  color: red;
  float: right;
  padding-right: 20px;
}
#customers-testimonials .item-details p {
  font-size: 14px;
}
#customers-testimonials .item {
  text-align: center;
  margin-bottom: 80px;
}

.owl-carousel .owl-nav [class*='owl-'] {
  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;
}


/*Downloaded from https://www.codeseek.co/shamim539/owl-carousel-2-testimonial-slider-example-GNqLda */
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
			}
		}
	});
});

Comments