Cacher is the code snippet organizer for pro developers

<div class="testimonial-carousel">
  <div class="container vh-md-center">
    <div class="testimonial-slides" data-slick='{"slidesToShow": 2, "slidesToScroll": 2, "autoplaySpeed": 4000, "speed": 1000, "autoplay": false}'>
        
      {% for item in module.testimonial %}
        <div class="row">
           <div class="col-12">
             <div class="card card-testimonial">
              <div class="card-body">
                <div class="card-text">
                  <h4 class="h4 testimonial-quote text-primary" data-mh="testimonial">
                    {{ item.text }}
                  </h4>
                </div>
                <div class="row">
                  <div class="col-6">
                    <div data-mh="person">
                      <strong>{{ item.name_field }}</strong><br />
                      {{ item.position }}
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="float-right">
                      <img src="{{ (item.logo.src) ? item.logo.src : item.profile_image.src }}" width="50%" height="auto" class="float-right" />
                    </div>
                  </div>
                </div>
              </div>
             </div>
           </div>
        </div>
      {% endfor %}
              
    </div>
  </div>
</div

<style>
  /* slick carousel */
  .testimonial-carousel { padding: 10px 0 0 0; }
  .testimonial-carousel .slick-slide { margin: 0; }
  .testimonial-carousel .slick-slide, .testimonial-carousel .slick-slide:focus { outline: none; }
  .testimonial-carousel .slick-dots { position: absolute; display: block; width: 100%; padding: 0; margin: 0 0 0 0; list-style: none; text-align: center; }
  .testimonial-carousel .slick-dots li { position: relative; display: inline-block; width: 16px; height: 16px; margin: 0 3px; padding: 0; cursor: pointer; }
  .testimonial-carousel .slick-dots li:first-child { margin-left: 0; }
  .testimonial-carousel .slick-dots li:before { display: none; }
  .testimonial-carousel .slick-dots li button { font-size: 0; line-height: 0; width: 12px; height: 12px; padding: 0; display: inline-block; background: rgba(204, 204, 204, 1); border: 1px solid rgba(204, 204, 204, 1); outline: none; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; }
  .testimonial-carousel .slick-dots li.slick-active button { background: rgba(51, 170, 85, 1); border-color: rgba(51, 170, 85, 1); }
  .testimonial-carousel .slick-control { position: relative; }
  .testimonial-carousel .slick-slider { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -khtml-user-select: text; }
  .testimonial-carousel .slick-list.draggable { cursor: -webkit-grab; }
  .slick-list.draggable:active { cursor: -webkit-grabbing; }
  .slick-slide img { pointer-events: none; }
</style>

<script>
  $(document).ready(function(){
  $('.testimonial-slides').slick({
    dots: true,
    infinite: true,
    autoplay: false,
    autoplaySpeed: 500,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3,
    draggable: true,
    arrows: false,
    responsive: [
      {
        breakpoint: 992,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });  
});
</script>