Блог

Главная - Вопросы по программированию - Slick.js создайте несколько каруселей

Slick.js создайте несколько каруселей

#javascript #jquery #html #web #slick.js

#javascript #jquery #HTML #веб #slick.js

Вопрос:

Я хочу создать три карусели:

 $(document).ready(function() {
        $('#c1').slick({
            dots: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 7 * 1000,
            mobileFirst: true,
            arrows: true
        }); 
         $('#c2').slick({
            dots: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 7 * 1000,
            mobileFirst: true,
            arrows: false
        });
         $('#c3').slick({
            dots: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 7 * 1000,
            mobileFirst: true,
            arrows: false
        });
     });

Но когда я выполняю этот код, появляется это сообщение об ошибке:

 slick.min.js:17 Uncaught TypeError: Cannot read property 'add' of null

Я также пробовал это здесь:

 .not('.slick-initialized').slick()

Тогда он не выдает ошибку, но создается только первая карусель.

У вас, ребята, есть какие-нибудь идеи? Спасибо за продвижение.

Ответ №1:

Похоже, slickslider не может найти нужный ему объект. Убедитесь, что ваши идентификаторы (c1, c2, c3) существуют в вашем коде.

С официальной страницы slickslider (http://kenwheeler.github.io/slick /):

 <html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

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

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

Убедитесь, что вы не вызываете функцию slick() дважды для одного и того же элемента.

Комментарии:

1. Спасибо за ваш ответ! Я проверил свои переменные и увидел, что обе переменные генерируют один и тот же идентификатор… Теперь это работает, СПАСИБО!

Ответ №2:

Я предложу другое решение с одним классом или идентификатором, если наши настройки одинаковы для каждой карусели, которую мы хотим использовать: 

 $(document).ready(function(){
var myCarousel = $(".carousel");
myCarousel.each(function() {        
    $(this).slick({
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 7 * 1000,
        mobileFirst: true,
        arrows: false
    });
  }); 
});