S
S
Suleymanov2020-05-11 21:22:39
css
Suleymanov, 2020-05-11 21:22:39

How to connect slick slider?

I do not understand, I do everything according to the instructions, but it still does not work. I have checked all links several times.

<!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:[email protected];700&family=Open+Sans:[email protected]&family=Roboto:[email protected];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();
  });

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
serazamat, 2020-07-02
@serazamat

Late, but... I think this is the issue:
https://code.jquery.com/jquery-3.5.1.min.js
This version of jquery may not be supported. Try an earlier one.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question