Bootstrap Testimonial Section 2

Testimonial Section with bootstrap framework

by Maksim

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="testimonial2 py-5">
  <div class="container">
    <div class="heading">
    </div>
    <div class="owl-carousel owl-theme testi2 mt-4">
      <div class="item">
        <div class="row position-relative">
          <div class="col-lg-6 col-md-6 align-self-center">
            <button class="btn rounded-circle btn-danger btn-md"><i class="icon-bubble"></i></button>
            <h4 class="my-3">Customer Reviews</h4>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <h5 class="mt-4">Simon Duo</h5>
            <h6 class="subtitle font-weight-normal">Partner, Brevin</h6>
          </div>
          <div class="col-lg-6 col-md-6 image-thumb d-none d-md-block">
            <img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/testimonial/1.jpg" alt="wrapkit" class="rounded-circle img-fluid" />
          </div>
        </div>
      </div>
      <div class="item">
        <div class="row position-relative">
          <div class="col-lg-6 col-md-6 align-self-center">
            <button class="btn rounded-circle btn-danger btn-md"><i class="icon-bubble"></i></button>
          ...

CSS

@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800);
.testimonial2 {
  font-family: "Montserrat", sans-serif;
  color: #8d97ad;
  font-weight: 300;
}

.testimonial2 h1,
.testimonial2 h2,
.testimonial2 h3,
.testimonial2 h4,
.testimonial2 h5,
.testimonial2 h6 {
  color: #3e4555;
}

.testimonial2 h5 {
    line-height: 22px;
    font-size: 18px;
		font-weight: 400;
}

.testimonial2 .font-weight-medium {
  font-weight: 500;
}

.testimonial2 .bg-light {
  background-color: #f4f8fa !important;
}

.testimonial2 .subtitle {
  color: #8d97ad;
  line-height: 24px;
}

.testimonial2 .testi2 .image-thumb {
  background: url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/testimonial/greadint-bg.png) no-repeat top center;
  text-align: center;
  padding: 10% 0;
}

.testimonial2 .testi2 .image-thumb img {
  width: 400px;
}

.testimonial2 .testi2 .owl-dots {
  display: inline-block;
  position: relative;
  top: -100px;
}

.testimonial2 .testi2 .owl-dots .owl-dot {
  border-radius: 100%;
  width: 70px;
  height: 70px;
  background-size: cover;
  margin-right: 10px;
  opacity: 0.4;
  cursor: pointer;
}

.testimonial2 .testi2 .owl-dots .owl-dot span {
  display: none;
}

.testimonial2 .testi2 .owl-dots .owl-dot.active,
.testimonial2 .testi2 .owl-dots .owl-dot:hover {
  opacity: 1;
}

@media (max-width: 767px) {
  .testimonial2 .testi2 .owl-dots {
    top: 0px;
  }
}

.testimonial2 .btn-md {
    padding: 18px 0px;
    width: 60px;
    height: 60px;
    font-size: 20px;
}

.testimonial2 .btn-danger {
    background: #ff4d7e !important;
    border: 1px solid #ff4d7e !important;
}

JavaScript

$('.testi2').owlCarousel({
  loop: true,
  margin: 20,
  nav: false,
  dots: true,
  autoplay: true,
  responsiveClass: true,
  responsive: {
    0: {
      items: 1,
      nav: false
    },
    1170: {
      items: 1
    }
  }
});

$(function() {
    // 1) ASSIGN EACH 'DOT' A NUMBER
    dotcount = 1;
    $('.testi2 .owl-dot').each(function() {
        $(this).addClass('dotnumber' + dotcount);
        $(this).attr('data-info', dotcount);
        dotcount = dotcount + 1;
    });
    // 2) ASSIGN EACH 'SLIDE' A NUMBER
    slidecount = 1;
    $('.testi2 .owl-item').not('.cloned').each(function() {
        $(this).addClass('slidenumber' + slidecount);
        slidecount = slidecount + 1;
    });
    $('.testi2 .owl-dot').each(function() {
        grab = jQuery(this).data('info');
        slidegrab = $('.slidenumber' + grab + ' img').attr('src');
        console.log(slidegrab);
        $(this).css("background-image", "url(" + slidegrab + ")");
    });
    // THIS FINAL BIT CAN BE REMOVED AND OVERRIDEN WITH YOUR OWN CSS OR FUNCTION, I JUST HAVE IT
    // TO MAKE IT ALL NEAT 

});