Делал слайдер по тутору с ютуб, но он почему-то не работает.
Тут я подключил slick.css:
|
1 |
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/style.css"> |
Тут создал обертку:
|
1 |
<div class="bike-slider"> <img class="bike-slider__item" src="images/bike-1.jpg" alt=""> <img class="bike-slider__item" src="images/bike-2.jpg" alt=""> <img class="bike-slider__item" src="images/bike-3.jpg" alt=""> <img class="bike-slider__item" src="images/bike-4.jpg" alt=""> </div> |
Подключаю jquery и slick.min.js:
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script src="js/slick.min.js"></script> <script type="js/main.js"></script> |
Js код:
|
1 |
$(function() { $('.bike-slider').slick(); }); |
По идее должно получиться так:
Но у меня выходит так:
Дополнительно:
Содержание
ошибки в браузере какие?
|
1 |
$(document).ready(function() { $('.bike-slider').slick(); }); |
поищите в коде ccs/
должно быть скорее всего css
Максим Федоров, попробовал, ничего не поменялось¯_(ツ)_/¯
если нужно может я прикреплю весь код?
может стоит дождаться загрузки DOM?
$(function() {}); — это короткая запись для $( document ).ready(), о чем прямо сказано в документации learn.jquery.com/using-jquery-core/document-ready
https://codepen.io/xdevelx/pen/abjqNNG
Возможно, нужно что-то отдельно докачивать для работы с js.
Вот такой же код но он не работает:
В редакторе Untitled работает:
Вот что он мне выдает:
тогда почему такой же код не работает у меня на компьютере (я использую Sublime Text3)
Так у вас опечатка. Вместо "type" "src" должно же быть в третьей строке, где подгружаете main.js
У вас код запуска слайдера не грузится.
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script src="js/slick.min.js"></script> <script src="js/main.js"></script> |
- Спасибо большое
Ответы:
насколько я помню в разметке для slick обязательны div внутри:
|
1 |
<div class="bike-slider"> <div><img class="bike-slider__item" src="images/bike-1.jpg" alt=""></div> <div><img class="bike-slider__item" src="images/bike-2.jpg" alt=""></div> <div><img class="bike-slider__item" src="images/bike-3.jpg" alt=""></div> <div><img class="bike-slider__item" src="images/bike-4.jpg" alt=""></div> </div> |
- Ничего не поменяло(
Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.
Оставить комментарий Отменить
Ответы
- Есть ответ! к записи Как уменьшить масштаб меньше 100% в Windows 10 (22H2)
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Как называется человек, который дизайн придумает для сайта и сверстает его?
- Есть ответ! к записи Можно ли установить Яндекс.Диск на АльтЛинукс?
- Есть ответ! к записи Картинки мутные только на сафари, есть выход?
- Есть ответ! к записи Keenetic. Как настроить SSTP клиент с сертификатом?
- Есть ответ! к записи Чем заменить executor в aiogram 3?
Чтобы определить, почему Slick не работает на вашем сайте, необходимо проанализировать несколько возможных причин.
1. Проверьте подключение jQuery: Slick требует наличие jQuery для работы. Убедитесь, что вы правильно подключили библиотеку jQuery перед подключением Slick.
2. Проверьте порядок подключения скриптов: Убедитесь, что вы подключаете Slick после подключения jQuery. Порядок подключения скриптов важен, так как Slick зависит от jQuery.
3. Проверьте версию Slick: Убедитесь, что вы используете последнюю версию Slick. Старые версии могут содержать ошибки, которые могут привести к некорректной работе.
4. Проверьте HTML структуру: Убедитесь, что ваш HTML код правильно структурирован для работы с Slick. Например, у вас должен быть контейнер (например, div) с классом "slick-slider", в котором содержатся слайды.
5. Проверьте наличие стилей: Убедитесь, что у вас есть необходимые стили для корректного отображения слайдера. Отсутствие стилей может привести к тому, что слайдер не будет отображаться правильно.
Проанализируйте вышеперечисленные пункты и устраните возможные проблемы. Если после этого Slick все еще не работает, попробуйте поискать решение на форумах или обратитесь к разработчику плагина для получения дополнительной помощи.