slick slider testimonial

index.html

<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" />
<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">
               <div class="cust_card_btn_div">
                  <a class="cust_card_btn my-5" href="#">
                  Project
                  </a>
               </div>
               <div class="card-body">
                  <h3 class="text-left py-4  ">Satisfied Clients</h3>
                  <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <span><i class="fa fa-plus"></i></span>
               </div>
            </div>
            <div class="card">
                <div class="cust_card_btn_div">
                  <a class="cust_card_btn my-5" href="#">
                  Project
                  </a>
               </div>
               <div class="card-body">
                  <h3 class="text-left py-4  ">Satisfied Clients</h3>
                  <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <span><i class="fa fa-plus"></i></span>
               </div>
            </div>
            <div class="card">
                <div class="cust_card_btn_div">
                  <a class="cust_card_btn my-5" href="#">
                  Project
                  </a>
               </div>
               <div class="card-body">
                  <h3 class="text-left py-4  ">Satisfied Clients</h3>
                  <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <span><i class="fa fa-plus"></i></span>
               </div>
            </div>
            <div class="card">
                <div class="cust_card_btn_div">
                  <a class="cust_card_btn my-5" href="#">
                  Project
                  </a>
               </div>
               <div class="card-body">
                  <h3 class="text-left py-4  ">Satisfied Clients</h3>
                  <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <span><i class="fa fa-plus"></i></span>
               </div>
            </div>
            <div class="card">
                <div class="cust_card_btn_div">
                  <a class="cust_card_btn my-5" href="#">
                  Project
                  </a>
               </div>
               <div class="card-body">
                  <h3 class="text-left py-4  ">Satisfied Clients</h3>
                  <p class="lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <span><i class="fa fa-plus"></i></span>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

script.js

 $(document).ready(function(){
      $('.items').slick({
        dots: true,
        infinite: true,
        speed: 800,
        slidesToShow: 3,
        slidesToScroll: 2,
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }

        ]
      });
    });

scripts

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

slick-slider-testimonial.markdown

slick slider testimonial

A Pen by Shivani Parmar on CodePen.

License.

style.css

body {
	background: #000;  /* fallback for old browsers */

	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.5px;
}
.lead{
  font-size:16.px;
}
.card {
	border: 0;
	margin: 10px;
	outline: none;
	cursor: pointer;
}

.slick-dots li button:before{
  color:#fff!important;
  font-size: 18px;
}
.card-body h3{
  color:#000;
  align-item:left;
  font-weght:600;
  margin:40px 0px 0px 0px;
  
}
.cust_card_btn_div{
  margin:0px 0px 50px;
  
}
.cust_card_btn{
  color:#fff;
  Background:#991B1E
;
  padding:16px 40px; 
  position:absolute;
  right:0px;
}
.card-body span{
  background:#991B1E;
  border-radius:4px;
  padding:10px 15px;
color:#fff;
  position:relative;
  float:right;
  margin-bottom:50px;
  
} 

styles

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />