Responsive Team Slider using HTML5 Owl Carousel

index.html

<div class="demo">
  <div class="container">
    <div class="row">
      <div id="testimonial-slider" class="owl-carousel">
        <div class="testimonial">
          <span class="icon fa fa-quote-left"></span>
          <p class="description">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>
          <div class="testimonial-content">
            <div class="pic">
              <img src="https://picsum.photos/130/130?image=1027" alt="">
            </div>
            <h3 class="name">Michele Miller</h3>
            <span class="title">Project Manager</span>
          </div>
        </div>
        <div class="testimonial">
          <span class="icon fa fa-quote-left"></span>
          <p class="description">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>
          <div class="testimonial-content">
            <div class="pic">
              <img src="https://picsum.photos/130/130?image=839" alt="">
            </div>
            <h3 class="name">Patricia Knott</h3>
            <span class="title">Web Developer</span>
          </div>
        </div>
        <div class="testimonial">
          <span class="icon fa fa-quote-left"></span>
          <p class="description">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>
          <div class="testimonial-content">
            <div class="pic">
              <img src="https://picsum.photos/130/130?image=856" alt="">
            </div>
            <h3 class="name">Justin Ramos</h3>
            <span class="title">Web Developer</span>
          </div>
        </div>
        <div class="testimonial">
          <span class="icon fa fa-quote-left"></span>
          <p class="description">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>
          <div class="testimonial-content">
            <div class="pic">
              <img src="https://picsum.photos/130/130?image=836" alt="">
            </div>
            <h3 class="name">Mary Huntley</h3>
            <span class="title">Web Developer</span>
          </div>
        </div>
        <div class="testimonial">
          <span class="icon fa fa-quote-left"></span>
          <p class="description">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>
          <div class="testimonial-content">
            <div class="pic">
              <img src="https://picsum.photos/130/130?image=883" alt="">
            </div>
            <h3 class="name">Aaron Newell</h3>
            <span class="title">Web Developer</span>
          </div>
        </div>
                <div class="testimonial">
          <span class="icon fa fa-quote-left"></span>
          <p class="description">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>
          <div class="testimonial-content">
            <div class="pic">
              <img src="https://picsum.photos/130/130?image=777" alt="">
            </div>
            <h3 class="name">Lizzie Geren</h3>
            <span class="title">Web Developer</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

responsive-team-slider-using-html5-owl-carousel.markdown

Responsive Team Slider using HTML5 Owl Carousel

Responsive Team Slider using HTML5 Owl Carousel

A Pen by Rakox460 on CodePen.

License.

script.js

$(document).ready(function() {
  $("#testimonial-slider").owlCarousel({
    items: 3,
    itemsDesktop:[1000,3],
    itemsDesktopSmall:[979,2],
    itemsTablet:[768, 2],
    itemsMobile:[650, 1],
    pagination: true,
    autoPlay: true
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

style.css

body {
  font-family: tahoma;
  background-image: url(https://s3.ca-central-1.amazonaws.com/image-web-frankie/BackgroundBlue.jpg);
  background-size: cover;
  background-position: center;
}

.testimonial {
  background-color: white;
  text-align: center;
  padding: 30px 30px 50px;
  margin: 100px 15px 160px;
  position: relative;
}

.testimonial::before,
.testimonial::after {
  content: "";
  border-top: 40px solid white;
  border-right: 125px solid transparent;
  position: absolute;
  bottom: -40px;
  left: 0;
}

.testimonial::after {
  border-right: none;
  border-left: 125px solid transparent;
  left: auto;
  right: 0;
}

.testimonial .icon {
  display: inline-block;
  font-size: 80px;
  color: #016d9b;
  margin-bottom: 20px;
  opacity: 0.6;
}

.testimonial .description {
  font-size: 14px;
  color: #777;
  text-align: justify;
  margin-bottom: 30px;
  opacity: 0.9;
}

.testimonial .testimonial-content {
  width: 100%;
  left: 0;
  position: absolute;
}

.testimonial .pic {
  display: inline-block;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 0 4px 4px #016d9b;
  overflow: hidden;
  z-index: 1;
  position: relative;
}

.testimonial .pic img {
  width: 100%;
  height: auto;
}

.testimonial .name {
  font-size: 15px;
  font-weight: bold;
  color: white;
  text-transform: capitalize;
  margin: 10px 0 5px 0;
}

.testimonial .title {
  display: block;
  font-size: 14px;
  color: #ffd9b8;
}

.owl-controls {
  margin-top: 20px;
}

.owl-pagination {
  display: flex;
  justify-content: center;
}

.owl-page {
  height: 10px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10%;
}

.owl-page:hover,
.owl-page.active {
  background-color: rgba(255, 255, 255, 0.3);
}

.owl-page:not(first-item) {
  margin-left: 10px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet" />