Изображения слайдера Slick загружаются только после нажатия Slick-стрелки

Я пытаюсь реализовать синхронизацию с помощью слайдера slick библиотека. У меня есть массив изображений под названием pictures исходя из бэкэнда. Я перебираю эти изображения, чтобы заполнить их slider-for а также slider-nav дивы.

HTML код:

<head>
<style>

.slick-arrow {
    color: #666666;
    background: red;
}    
.slider-for {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}  
.slider-nav h1 {
    display: inline-block;
}
.slider-nav .slick-slide {
    text-align: center;
    width: 337px;
}
.container {
  margin-bottom: 5%;
  margin-top: 5%;
}    

</style>   
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick-theme.css"/>
</head>
    <div class="container-fluid padding25">
      <h2>Pictures</h2>
          <div class="slider-for">
            <% var index = 0;%>
            <%_.each(pictures, function(picture) { %>

                <div>
                    <img src="<%=picture.pictureUrl%>" class="img-rounded" width="460" height="345"/>
                </div>
            <%
              index++;
              });
            %>
          </div>

            <div class="slider-nav">
                <%_.each(pictures, function(picture) { %>

                    <div>
                        <img src="<%=picture.pictureUrl%>" class="img-rounded" width="150" height="300"/>
                    </div>
                <%
                index++;
                });
                %>   
        </div> 

    <div class="row">
        <h2>Videos</h2>
     ...
    </div>
    </div>

Java-script

<script type="text/javascript" src="/slick-1.5.7/slick/slick.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        console.log("inside docready");
          $('.slider-for').slick({
              slidesToShow: 1,
              slidesToScroll: 1,
              fade: true,
              asNavFor: '.slider-nav',     
          });


        $('.slider-nav').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          dots: true,    
          asNavFor: '.slider-for',
          dots: true,
          centerMode: true,
          centerPadding: '3%',    
          focusOnSelect: true,
        });

        $('.single-item').slick({
            dots: false,
            arrows: true,
        });
    });
</script>  

Только одно изображение видно в slider-nav на странице загрузки. При нажатии влево / вправо slick-arrowизображения отображаются правильно. Я пытался написать тот же код в jsFiddle. Но я думаю, что это хорошо работает там (не уверен, что его, потому что я воздержался от использования for петля там.)

2 ответа

Решение

Позвольте мне упомянуть, что этот мой код находится на вкладке, которая по умолчанию не активна. Я полагал, что вычисление ширины div ов изображения не происходит, когда вкладка становится активной. Если это была активная вкладка по умолчанию при загрузке страницы, она работает нормально, а не иначе. Это потому, что загрузчик использует display:none обрабатывать скрытые вкладки, и невозможно получить ширину вкладок с display:none, Я нашел решение здесь.

На моей главной странице, где настраиваются все эти вкладки, я вставил этот код:

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     /* undo display:none          */
    height: 0;          /* height:0 is also invisible */ 
    overflow-y: hidden; /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
    height: auto;       /* let the content decide it  */
}

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

6

Я пока не могу комментировать, поэтому я даю это как ответ.

Есть несколько вещей, которые могут быть неправильными, но это, вероятно, будет связано с тем, как вы загружаете в slick.js или ваш jQuery.

  1. Вы используете последнюю версию jQuery?
  2. Вы используете последнюю версию slick.js?
  3. JQuery загружается ДО slick.js?

Это дает какие-либо ошибки в вашей консоли? У меня была такая же проблема некоторое время назад ( Slick Carousel Uncaught TypeError: $ (...). Slick не является функцией). В конечном итоге я узнал, что включил две версии jQuery, одна из которых была очень старой.

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