Answer the question
In order to leave comments, you need to log in
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
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question