@ms-config

Как подключить slick slider?

Я не понимаю, все делаю по инструкции , но все равно не получается. Все ссылки проверил несколько раз.
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>Document</title>
  <link
    href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@700&family=Roboto:wght@400;900&display=swap"
    rel="stylesheet">
  <link rel='stylesheet' href='css/style.css'>
  <link rel="stylesheet" href="css/slick.css">
</head>
<body>


<section class="reviews">
<div class="container">
  <div class="title">
    What <span>People</span> Say About Us
  </div>
  
  <div class="reviews-slider">
    <div class="review-slider__item">
      <div class="reviews-box">
        <div class="reviews-box__images">
          <img src="images/captain.png" alt="">
        </div>
        <div class="reviews-box__content">
          <div class="reviews-box__text">
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered
            alteration in some form, by injected humour, or randomised words which don't look even slightly
            believable.
          </div>
          <div class="reviews-box__author">
            <span>Captain America</span> - unemployed
          </div>
        </div>
      </div>
    </div>
    <div class="review-slider__item">
      <div class="reviews-box">
        <div class="reviews-box__images">
          <img src="images/captain.png" alt="">
        </div>
        <div class="reviews-box__content">
          <div class="reviews-box__text">
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered
            alteration in some form, by injected humour, or randomised words which don't look even slightly
            believable.
          </div>
          <div class="reviews-box__author">
            <span>Captain America</span> - unemployed
          </div>
        </div>
      </div>
    </div>
    <div class="review-slider__item">
      <div class="reviews-box">
        <div class="reviews-box__images">
          <img src="images/captain.png" alt="">
        </div>
        <div class="reviews-box__content">
          <div class="reviews-box__text">
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered
            alteration in some form, by injected humour, or randomised words which don't look even slightly
            believable.
          </div>
          <div class="reviews-box__author">
            <span>Captain America</span> - unemployed
          </div>
        </div>
      </div>
    </div>
    <div class="review-slider__item">
      <div class="reviews-box">
        <div class="reviews-box__images">
          <img src="images/captain.png" alt="">
        </div>
        <div class="reviews-box__content">
          <div class="reviews-box__text">
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered
            alteration in some form, by injected humour, or randomised words which don't look even slightly
            believable.
          </div>
          <div class="reviews-box__author">
            <span>Captain America</span> - unemployed
          </div>
        </div>
      </div>
    </div>
    <div class="review-slider__item">
      <div class="reviews-box">
        <div class="reviews-box__images">
          <img src="images/captain.png" alt="">
        </div>
        <div class="reviews-box__content">
          <div class="reviews-box__text">
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered
            alteration in some form, by injected humour, or randomised words which don't look even slightly
            believable.
          </div>
          <div class="reviews-box__author">
            <span>Captain America</span> - unemployed
          </div>
        </div>
      </div>
    </div>
    <div class="review-slider__item">
      <div class="reviews-box">
        <div class="reviews-box__images">
          <img src="images/tony.png" alt="">
        </div>
        <div class="reviews-box__content">
          <div class="reviews-box__text">
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered
            alteration in some form, by injected humour, or randomised words which don't look even slightly
            believable.
          </div>
          <div class="reviews-box__author">
            <span>Tony Stark</span> - CEO Stark Industries
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>
</section>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script scr='js/slick.min.js'></script>
  <script scr="js/main.js"></script>
</body>

</html>

.reviews-slider{
    margin-top: 160px;
} 
.review-slider__item {
}
.reviews-box {
    display:flex;
    box-shadow: 0px 21px 49px 1px rgba(41,44,61,.15)
}
.reviews-box__images{
    background-color: #2575e7;
    width: 190px;
    min-height: 350px;
    display:flex;
    align-items: center;
    justify-content: center;
    
}
.reviews-box__images img{
    border-radius: 50%;    
}

.reviews-box__content{  
    background-color: #ffffff;
    width: 330px;
    font-size: 16px;
    line-height: 26px;
    padding: 0 40px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.reviews-box__text {
    margin-bottom: 30px;


}
.reviews-box__author {
}
.reviews-box__author span{
    color:#2575e7;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
}

$(document).ready(function(){
    $('.reviews-slider').slick();
  });
  • Вопрос задан
  • 232 просмотра
Пригласить эксперта
Ответы на вопрос 1
@serazamat
Запоздало, но... Я думаю дело в этом:
https://code.jquery.com/jquery-3.5.1.min.js
Возможно данная версия jquery не поддерживается. Попробуйте более раннюю.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы