"Скользкий" код jQuery карусели не работает / загрузка

#javascript #html #jquery #slick.js

#javascript #HTML #jquery #slick.js

Вопрос:

Попытка использовать скользкую карусель, следуя «использованию» на их веб-сайте в буквальном смысле и не имея успеха.

Мой код:

     <html>
  <head>
  <title>slick test</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><img src="http://placehold.it/1000x400amp;text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400amp;text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400amp;text=[ img 1 ]" /></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
      });
      $('.single-item').slick();
    });
  </script>

  </body>
</html>

Я предполагаю, что с jQuery что-то не так, поскольку VS-code показывает ошибки в сценарии инициализации.

Я пробовал использовать CDN-версии slick и более новую версию jQuery, но, похоже, ни одна из них не работает. За исключением изображений в div и скрипта ‘single item’, этот код идентичен коду, предлагаемому на веб-сайте slick.

1. Добро пожаловать в SO. Попробуйте удалить строку setting-name: setting-value , поскольку это всего лишь заполнитель, и его там не должно быть.

2. Кроме того, находится ли папка / slick в вашем корне или в другом месте?

Ответ №1:

В вашем коде отсутствуют префиксы http (s): // для содержимого CDN
Скользкий учебник (ссылки) для CDN тоже.
Вы допускаете в своем коде часть кода примера, которая нигде не определена

рабочий код:

   <html>
  <head>
  <title>slick test</title>
  <link rel="stylesheet" type="text/css" href="https:///cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  </head>
  <body>

  <div class="your-class">
    <div><img src="http://placehold.it/1000x400amp;text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400amp;text=[ img 1 ]" /></div>
    <div><img src="http://placehold.it/1000x400amp;text=[ img 1 ]" /></div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

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

  </body>
</html>