Когда я пытаюсь реализовать этот слайдер Slick, я получаю только список чисел, как на картинке: https://codepen.io/AntFArm/pen/JNEgJE
html-код:
<div class = "main">
<div class = "slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class = "slider slider-nav">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class = "action">
<a href = "#" data-slide = "3">go to slide 3</a>
<a href = "#" data-slide = "4">go to slide 4</a>
<a href = "#" data-slide = "5">go to slide 5</a>
</div>
</div>
js-код:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
Я получаю это:
У меня точно такой же код, как на сайте codepen.io.. Также у меня нет никаких ошибок. Что я делаю неправильно? Заранее спасибо.
Мой сценарий включает в себя:
<script src = "/js/jquery.min.js"></script>
<script src = "/js/jquery-ui.min.js"></script>
<script src = "/js/slick.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "/assets/slick/slick.css"/>
<link rel = "stylesheet" type = "text/css" href = "/assets/slick/slick-theme.css"/>
<script type = "text/javascript" src = "/assets/slick/slick.min.js"></script>
<script>
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>
Загружаю нужные файлы в голову:
я добавил их в свой код выше



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Javascript запускается так, как его видят. Поскольку ваш код не работает, я должен предположить, что вы добавляете свой скрипт в <head> или, по крайней мере, перед тем, где вы определяете <div class = "main">. Механизм рендеринга еще не отрендерил соответствующие элементы слайдера, поэтому он не может их найти и... ничего не делает.
Либо оберните свой скрипт в загрузку (или $(function() {/* your code here */})), либо поместите свой скрипт внизу страницы.
$.getScript("/js/jquery-ui.min.js", function(){ alert("Сценарий загружен и выполнен."); }); делаю так, не помогает..
Я не понимаю, как то, что вы написали, имеет какое-либо отношение к тому, что я сказал?
Загружаю нужные файлы в раздел head; см. исходный вопрос, спасибо!
Перечитайте мой ответ... Я говорю вам, что когда ваш скрипт запускается в <head> (как вы подтвердили), элемент <div class = "main"> еще не существует, поэтому он не находит элементы и не ничего не делать. Вы должны либо заставить содержимое вашего скрипта запускаться при загрузке, либо переместить скрипт в нижнюю часть вашего <body>
Похоже, что стильные стили по умолчанию не применяются, дважды проверьте, что они у вас есть, и путь к ним правильный.
<link rel = "stylesheet" type = "text/css" href = "/assets/slick/slick.css"/>
<link rel = "stylesheet" type = "text/css" href = "/assets/slick/slick-theme.css"/>
В вашей кодовой ручке slick не загружается, поэтому вы получаете отображение DOM по умолчанию для ваших div (один под другим). Должно быть что-то не так с загрузкой скриптов.
Вы также включили зависимости js (jQuery, slick-carousel.js) на свою страницу? Пожалуйста, приведите воспроизводимый пример.