Гладкий слайдер, показывающий только текст

Когда я пытаюсь реализовать этот слайдер 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>

Загружаю нужные файлы в голову:

Гладкий слайдер, показывающий только текст

Вы также включили зависимости js (jQuery, slick-carousel.js) на свою страницу? Пожалуйста, приведите воспроизводимый пример.

Teh 25.03.2019 16:42

я добавил их в свой код выше

sg_sg94 25.03.2019 16:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
796
3

Ответы 3

Javascript запускается так, как его видят. Поскольку ваш код не работает, я должен предположить, что вы добавляете свой скрипт в <head> или, по крайней мере, перед тем, где вы определяете <div class = "main">. Механизм рендеринга еще не отрендерил соответствующие элементы слайдера, поэтому он не может их найти и... ничего не делает.

Либо оберните свой скрипт в загрузку (или $(function() {/* your code here */})), либо поместите свой скрипт внизу страницы.

$.getScript("/js/jquery-ui.min.js", function(){ alert("Сценарий загружен и выполнен."); }); делаю так, не помогает..

sg_sg94 26.03.2019 15:53

Я не понимаю, как то, что вы написали, имеет какое-либо отношение к тому, что я сказал?

Leroy Stav 26.03.2019 16:07

Загружаю нужные файлы в раздел head; см. исходный вопрос, спасибо!

sg_sg94 26.03.2019 16:36

Перечитайте мой ответ... Я говорю вам, что когда ваш скрипт запускается в <head> (как вы подтвердили), элемент <div class = "main"> еще не существует, поэтому он не находит элементы и не ничего не делать. Вы должны либо заставить содержимое вашего скрипта запускаться при загрузке, либо переместить скрипт в нижнюю часть вашего <body>

Leroy Stav 26.03.2019 17:55

Похоже, что стильные стили по умолчанию не применяются, дважды проверьте, что они у вас есть, и путь к ним правильный.

<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 (один под другим). Должно быть что-то не так с загрузкой скриптов.

Другие вопросы по теме