Slick slider reviews

by serg_x

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css">
<div class="lb_reviews_wr">
  <div>
    <div class="item">
      <div class="foto"><img src="/images/face1.jpg" alt="" /></div>
      <div class="text">
        <p class="name">Александр Курдасов</p>
        <p class="text">Оклеил у ребят плёнкой крышу. Сделали всё качественно и надёжно. Некоторые даже говорили, что кажется как крыша отдельно покрашена. Всё очень понравилось и выглядит супер! Большое спасибо!</p>
      </div>
    </div>
  </div>
  <div>
    <div class="item">
      <div class="foto"><img src="/images/face3.jpg" alt="" /></div>
      <div class="text">
        <p class="name">Сергей Самусенко</p>
        <p class="text">Поставили ксенон, отполировали и покрыли защитной плёнкой фары.Светит теперь как надо)) Сделали всё оперативно,аккуратно, да и цена приятно удивила.Успехов вам парни!</p>
      </div>
    </div>
  </div>
  <div>
    <div class="item">
      <div class="foto"><img src="/images/face4.jpg" alt="" /></div>
      <div class="text">
        <p class="name">Дмитрий Аркадьевич</p>
        <p class="text">Хочу поблагодарить ребят за отличную работу и сервис. Уже год прошёл, а всё как новое. Жалею, что покрыл защитной плёнкой только половину машины. Готовлюсь добить кузов до конца. Выберу время - и к вам!!))))))</p>
      </div>
    </div>
  </div>
  <div>
    <div class="item">
      <div class="foto"><img src="/images/face5.jpg" alt="" /></div>
      <div class="text">
        <p class="name">Полина Адская</p>
        <p class="text">Спасибо за обклейку задних фонарей;)) Все круто, езжу уже практически год, все на месте)) чмоккк</p>
      </div>
    </div>
  </div>
  <div>
    <div class="item">
      <div class="foto"><img src="/images/face2.jpg"...

CSS

.reviews_block_wr {
  background-color: #fff;
  padding: 100px 0;
}

.reviews_block_wr .item_wr {
  text-align: center;
  padding-top: 32px;
}

.reviews_block_wr .item {
  position: relative;
  border: 3px solid #e4e5ff;
  border-radius: 10px;
  padding: 36px 60px 40px;
}

.reviews_block_wr .item .avatar {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -50%, 0);
}

.reviews_block_wr .item .avatar {
  padding: 0 10px;
  background-color: #fff;
}

.reviews_block_wr .item .name {
  font-size: 18px;
  margin-top: 7px;
}

.reviews_block_wr .item .bot_hr {
  font-size: 18px;
  color: #797ff0;
  line-height: 1em;
}

.reviews_block_wr .item .text {
  color: #929292;
  line-height: 1.7em;
  margin-top: 15px;
}

.slick-dots {
  bottom: -40px;
}

ul.slick-dots li button:before {
  content: '';
  width: 12px;
  opacity: 1;
  height: 12px;
  border-radius: 100%;
  background-color: #f2f7fb;
}

ul.slick-dots li.slick-active button:before {
  background-color: #797ff0;
}

JavaScript

/*
  if(typeof $.fn.Slick === 'undefined'){
    document.write('<script src="js/slick.min.js">\x3C/script>'); [[- http://kenwheeler.github.io/slick/ ]]
    document.write('<link href="css/slick.css" rel="stylesheet">');
    document.write('<link href="css/slick-theme.css" rel="stylesheet">');
  }
*/
$('.reviews_block_wr').find(".reviews").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  dots: true,
  infinite: true,
  autoplay: false
});