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

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

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>

JavaScript:

<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.)

источник

2015-08-28 AshwiniR

Еще одна странная вещь, которую я только что наблюдал, - это если я нажму F12, чтобы перейти к инструментам dev, это приведет к тому, что изображения «слайдер-nav» загрузятся правильно. (без щелчка стрелками) – AshwiniR

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

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

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

источник

2015-08-28 20:18:11 AshwiniR

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

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

Вы используете последнюю версию jQuery?
Вы используете последнюю версию slick.js?
Загружается ли jQuery ПЕРЕД slick.js?

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

источник

2015-08-28 09:56:34 Sanderfish

У меня есть последние версии slickjs, slick. css и jQuery. Я не получаю такую ошибку на консоли. Я импортировал jQuery перед slick.js в файле layout.ejs. – AshwiniR

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

ответ

Смежные вопросы