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

#javascript #slick.js

Вопрос:

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

Я загружаю необходимые файлы в head:

Ответ №1:

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

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

1. $.getScript(«/js/jquery-ui.min.js «, function(){ оповещение («Скрипт загружен и выполнен».); }); Я делаю это, но не помогает..

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

3. Я загружаю необходимые файлы в раздел my head; смотрите Оригинальный вопрос спасибо!

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

Ответ №2:

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

 <link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>

Ответ №3:

В вашем codepen slick не загружен, поэтому вы получаете DOM-отображение ваших divs по умолчанию (по одному друг под другом). Должно быть, что-то не так с вашей загрузкой скриптов.