Testimonial slider jquery owl carousel html css code

Testimonial slider jquery owl carousel is simple to use bootstrap snipp which you can use anywhere in your web page, images credit from pexels website.

Whole html/css code


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"/>
<script src="https://kit.fontawesome.com/b31e06099e.js" crossorigin="anonymous"></script>
<title>Hello, world!</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
    background-color: #f2f2f2;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.5px;
}
.author-text {
    background: url(https://annedece.sirv.com/Images/commo.png) no-repeat right bottom;
}
.owl-prev, .owl-next {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 41%;
    display: block !important;
}
.owl-prev {
    left: -16px;
}
.owl-next {
    right: 20px;
}
.owl-prev i, .owl-next i {
    color: #fff;
    background-color: #3901f8;
    padding: 20px;
}
button {
    border: none !important;
    border-radius: none !important;
    outline: none !important;
}
@media (max-width: 800px) {
.author-text{
margin-top:30px;
margin-bottom:30px;    
}
.lead{
font-size:16px;    
}
}
</style>
<style></style>
</head>
<body>
<div class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-10 mx-auto testimonials owl-theme owl-carousel">
        <div class="p-lg-5 d-flex align-items-center bg-white shadow-lg">
          <div class="author-img"> <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid"> </div>
          <div class="author-text p-lg-5">
            <div class="px-5">
              <p class="lead pb-lg-5">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus eget tellus a rutrum. Aliquam eleifend, sapien ac fringilla tincidunt, nisl tortor aliquet metus, et malesuada libero lorem sit amet nulla."</p>
              <h4 class="font-weight-bold" style="color:#2d00ff;">John Deo</h4>
              <p class="text-muted mb-0">CEO & Founder</p>
            </div>
          </div>
        </div>
        <div>
          <div class="p-lg-5 d-flex align-items-center bg-white shadow-lg">
            <div class="author-img"> <img src="https://images.pexels.com/photos/1130626/pexels-photo-1130626.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid"> </div>
            <div class="author-text p-lg-5">
              <div class="px-5">
                <p class="lead pb-lg-5">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus eget tellus a rutrum. Aliquam eleifend, sapien ac fringilla tincidunt, nisl tortor aliquet metus, et malesuada libero lorem sit amet nulla."</p>
                <h4 class="font-weight-bold" style="color:#2d00ff;">John Deo</h4>
                <p class="text-muted mb-0">CEO & Founder</p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="p-lg-5 d-flex align-items-center bg-white shadow-lg">
            <div class="author-img"> <img src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid"> </div>
            <div class="author-text p-lg-5">
              <div class="px-5">
                <p class="lead pb-lg-5">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus eget tellus a rutrum. Aliquam eleifend, sapien ac fringilla tincidunt, nisl tortor aliquet metus, et malesuada libero lorem sit amet nulla."</p>
                <h4 class="font-weight-bold" style="color:#2d00ff;">John Deo</h4>
                <p class="text-muted mb-0">CEO & Founder</p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="p-lg-5 d-flex align-items-center bg-white shadow-lg">
            <div class="author-img"> <img src="https://images.pexels.com/photos/1845534/pexels-photo-1845534.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid"> </div>
            <div class="author-text p-lg-5">
              <div class="px-5">
                <p class="lead pb-lg-5">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus eget tellus a rutrum. Aliquam eleifend, sapien ac fringilla tincidunt, nisl tortor aliquet metus, et malesuada libero lorem sit amet nulla."</p>
                <h4 class="font-weight-bold" style="color:#2d00ff;">John Deo</h4>
                <p class="text-muted mb-0">CEO & Founder</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Optional JavaScript --> 
<!-- jQuery first, then Popper.js, then Bootstrap JS --> 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
<script>
 $(".testimonials").owlCarousel({
    items: 1,
    margin:20,
    nav: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
</script>
</body>
</html>

Live demo on js fiddle

Spread the love

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top