Не подключается slick slider

199

29 декабря 2019, 06:30

Не работает slick slider div'ы просто стают в столбик, вот мои подключённые файлы

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Your custom styles (optional) -->
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/compiled-4.7.4.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

Участок кода который должен быть слайдером:

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

Скрипты:

<!-- SCRIPTS -->
    <script type="text/javascript">
    $(document).ready(function() {
    $("#carousel-example-1z").carousel({
       interval : false;
});
$("#carousel-example-2z").carousel({
   interval : false;
});
$('.your-class').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});
});
    </script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.js"></script>

Answer 1

Информации недостаточно, чтобы Вам помочь. Пара моментов:

у Вас все CSS и JS грузятся локально из сайта, а slick - из CDN. Попробуйте и его загрузить локально, как всех;
у Вас 3 элемента, и слайдер вы инициализируете, чтобы показывать 3 элемента. Зачем он тогда нужен? Или элементов больше?

Вот пример с использованием Вашего кода. У Вас получается что-то другое?

$(document).ready(function() { 
  $('.your-class').slick({ 
    slidesToShow: 3, 
    slidesToScroll: 1, 
    autoplay: true, 
    autoplaySpeed: 2000, 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" /> 
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
 
<div class="your-class"> 
  <div>your content 1</div> 
  <div>your content 2</div> 
  <div>your content 3</div> 
  <div>your content 4</div> 
  <div>your content 5</div> 
  <div>your content 6</div> 
</div>