Как реализовать вот такой слайдер?

на примере моего кода: HTML

    <div class="reviews-slider">
      <div class="reviews-card">
        <div class="reviews-card__image"><img src="img/Ellipse 5.png" alt="девушка на доске" class="reviews-card__image__img"></div>
        <h3 class="reviews-card__header">Мария Кравец</h3>
        <p class="reviews-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="reviews-card">
        <div class="reviews-card__image"><img src="img/Ellipse 6.png" alt="девушка на доске" class="reviews-card__image__img"></div>
        <h3 class="reviews-card__header">Дарья Сиголик</h3>
        <p class="reviews-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="reviews-card">
        <div class="reviews-card__image"><img src="img/Ellipse 7.png" alt="девушка на доске" class="reviews-card__image__img"></div>
        <h3 class="reviews-card__header">Антон Жидов</h3>
        <p class="reviews-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <div class="arrows">
      <div class="arrow-left">
        <img src="img/arrow left.svg" alt="стрелка влево">
      </div>
      <div class="arrow-right">
        <img src="img/arrow right.svg" alt="стрелка вправо">
      </div>

JS

  <script type="text/javascript">
$(document).ready(function(){
  $('.reviews-slider').slick({
    // arrow: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    prevArrow: $('.arrow-left'),
    nextArrow: $('.arrow-right'),
    variableWidth: true,
  });
});

после слайдера (в html) я вставил иконки стрелок и обозвал их классами arrow-left и arrow-right. далее в скрипте написал

    prevArrow: $('.arrow-left'), - предыдущий слайд
    nextArrow: $('.arrow-right'), - следующий слайд

эти значения можешь посмотреть на сайте slick. вместо картинок можно написать слово или сделать квадрать, вообщем все что угодно, просто назови его как-нибудь, а потом сошлись на него в js