Почему не роботает Slick?

Question

[Xlopekcudun]

Делал слайдер по тутору с ютуб, но он почему-то не работает.

Тут я подключил slick.css:

<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">

Тут создал обертку:

<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:

<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 код:

$(function() {
    $('.bike-slider').slick();
});

По идее должно получиться так:


Но у меня выходит так:

Comments

[Максим Федоров]

ошибки в браузере какие?

[Максим Федоров]

может стоит дождаться загрузки DOM?

$(document).ready(function() {

    $('.bike-slider').slick();

});

[Xlopekcudun]

Максим Федоров, Без результата

[Xlopekcudun]

Максим Федоров, Failed to load resource: net::ERR_FILE_NOT_FOUND ccs/normalize.css:1

[Максим Федоров]

Xlopekcudun,

поищите в коде ccs/
должно быть скорее всего css

[Xlopekcudun]

Максим Федоров, Спасибо, нашол теперь нет ошибки про normalize но на слайдер никак не повлияло

[Максим Федоров]

Xlopekcudun, ошибок никаких?

[Максим Федоров]

Xlopekcudun, если учесть остальные советы: див для картинок, мой код для ready?

[Xlopekcudun]

Максим Федоров, нету
Максим Федоров, попробовал, ничего не поменялось¯\_(ツ)_/¯

[Xlopekcudun]

Мне кажется что я скорее перпишу код заново чем найду пробел в коде.
если нужно может я прикреплю весь код?

[xdevelx]

Максим Федоров,

может стоит дождаться загрузки DOM?

$(function() {}); — это короткая запись для $( document ).ready(), о чем прямо сказано в документации learn.jquery.com/using-jquery-core/document-ready

[xdevelx]

Тот код, который предоставлен в вопросе, вполне рабочий


https://codepen.io/xdevelx/pen/abjqNNG

[Xlopekcudun]

xdevelx, Я создал новый проект вписал код, который вы мне сбросили все хорошо кроме js, оно просто игнорирует js код.

Возможно, нужно что-то отдельно докачивать для работы с js.

Вот такой же код но он не работает:


В редакторе Untitled работает:


Вот что он мне выдает:

[Xlopekcudun]

В общем я закинул весь проект в онлайн редактор и он работает как нужно не считая картинок (это не важно)



тогда почему такой же код не работает у меня на компьютере (я использую Sublime Text3)

[xdevelx]

Xlopekcudun, например, потому что не подключаются локально скрипты. Смотрите в dev tools во вкладке network сеть. Может банально пути неправильно прописаны.

[Xlopekcudun]

xdevelx, Понял спасибо

Answer 1

[Юрий Горбунов]

Так у вас опечатка. Вместо "type" "src" должно же быть в третьей строке, где подгружаете main.js
У вас код запуска слайдера не грузится.

<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>

Comments

[Xlopekcudun]

Спасибо большое

Answer 2

[iBird Rose]

насколько я помню в разметке для slick обязательны div внутри:

<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>

Comments

[Xlopekcudun]

Ничего не поменяло(