Responsive testimonial slider bootstrap

Responsive testimonial slider bootstrap is a bootstrap snipp which you can use as a testimonial slider in your website.

Whole html/css code


<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Client Testimonial 4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
    background: #1f4037;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #1f4037, );  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #1f4037, #99f2c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.5px;
}
.card {
    border: 0;
    margin: 1px;
    outline: none;
    cursor: pointer;
}
.card img {
    transition: all 0.3s ease;
}
.card:hover img {
    filter: grayscale(100%);
}
</style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h2 class="text-center py-5 text-white">Satisfied Clients</h2>
      <div class="items">
        <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/2765557/pexels-photo-2765557.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <div class="card-body">
            <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <h5 class="mb-0 text-success">John Deo</h5>
            <p class="mb-0 text-muted">CEO & Founder</p>
          </div>
        </div>
        <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/3996756/pexels-photo-3996756.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <div class="card-body">
            <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <h5 class="mb-0 text-success">John Deo</h5>
            <p class="mb-0 text-muted">CEO & Founder</p>
          </div>
        </div>
        <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/428328/pexels-photo-428328.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <div class="card-body">
            <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <h5 class="mb-0 text-success">John Deo</h5>
            <p class="mb-0 text-muted">CEO & Founder</p>
          </div>
        </div>
        <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/3279570/pexels-photo-3279570.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <div class="card-body">
            <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <h5 class="mb-0 text-success">John Deo</h5>
            <p class="mb-0 text-muted">CEO & Founder</p>
          </div>
        </div>
        <div class="card"> <img class="img-fluid card-img-top" src="https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <div class="card-body">
            <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <h5 class="mb-0 text-success">John Deo</h5>
            <p class="mb-0 text-muted">CEO & Founder</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function(){
      $('.items').slick({
        dots: true,
        infinite: true,
        speed: 800,
        slidesToShow: 3,
        slidesToScroll: 3,
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }

        ]
      });
    });
  </script>
</body>
</html>

jsfiddle example

Spread the love

Related Posts

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

Back To Top