Изображения слайдера 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 петля там.)

Источник

3 ответа

Решение

Позвольте мне упомянуть, что этот мой код находится на вкладке, которая по умолчанию не активна. Я полагал, что вычисление ширины 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, чтобы изменить способ обработки скрытых вкладок в начальной загрузке.

Источник

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

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

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

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

Источник

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

Этот код исправил это

         $('.accordion-item').on('click', function (e) {
      $(".my_slick_gallery").slick('setPosition');
    });
Источник
Другие вопросы по тегам