Не хочет работать Slick Slider

139

12 июля 2021, 21:00

Делаю все, как написано в документации, выбивает ошибки :

$(document).ready(function(){ 
   
   
  $('.multiple-items').slick({ 
    infinite: true, 
    slidesToShow: 3, 
    slidesToScroll: 3 
  }); 
});

<!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 rel="stylesheet" href="css/style.css"> 
</head> 
 
<body> 
  <div class="multiple-items"> 
    <div><img src="https://picsum.photos/200/300?random=1" alt=""> 
    </div> 
    <div><img src="https://picsum.photos/200/300?random=2" alt=""> 
    </div> 
    <div><img src="https://picsum.photos/200/300?random=3" alt=""> 
    </div> 
  </div> 
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"></script> 
  <script src="js/main.js"></script> 
</body> 
 
</html>

Answer 1

Я разобрался с проблемой. Во-первых, "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" я случайно подключил в скрипты, а надо прописать было в head через link; Во-вторых, нужно было подключить еще одну ссылку на карусель с типом js : https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js

$(document).ready(function(){ 
   
   
  $('.multiple-items').slick({ 
    infinite: true, 
    slidesToShow: 3, 
    slidesToScroll: 3 
  }); 
});

<!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 rel="stylesheet" href="css/style.css"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> 
</head> 
 
<body> 
  <div class="multiple-items"> 
    <div><img src="https://picsum.photos/200/300?random=1" alt=""> 
    </div> 
    <div><img src="https://picsum.photos/200/300?random=2" alt=""> 
    </div> 
    <div><img src="https://picsum.photos/200/300?random=3" alt=""> 
    </div> 
  </div> 
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>   
  <script src="js/main.js"></script> 
</body> 
 
</html>