Слипкая карусель исчезает, прилипая к изображениям разного размера.

Question

Я пытаюсь использовать карандаш Slick с настройкой затухания, чтобы отображать слайд-шоу изображений для главной страницы веб-сайта. Изображения в слайд-шоу имеют два разных соотношения размеров (один для вертикальных изображений и другой для горизонтального). Когда слайд-шоу циклически перемещается с большего на меньшее изображение, а не затухает плавно, избыточная ширина первого изображения прилипает, а затем исчезает.

Вот базовый пример кода, который я использую. Вы можете увидеть результат на этой скрипке https://jsfiddle.net/m4ug5o09/

HTML:

<div class="fade"> 
    <div> 
     <img src="http://placehold.it/900x400/000"> 
    </div> 
    <div> 
     <img src="http://placehold.it/700x400/"> 
    </div> 
</div> 

JS

$('.fade').slick({ 
dots: false, 
infinite: true, 
speed: 700, 
autoplay: true, 
fade: true, 
autoplaySpeed: 3000, 
arrows: false, 
slidesToShow: 1, 
slidesToScroll: 1}); 

Кроме того, когда я загрузить страницу, начальные вспышки изображения в режиме реального быстро в нижней части страницы (как в нижнем колонтитуле).

Идеи?

Answer 1

Я не уверен, что эта проблема может быть решена путем настройки настроек slick. Но, если вам интересно, есть обходной путь.

Добавить идентификатор для div, содержащий горизонтальное изображение.

<div> 
    <img src="900x400.jpg"/> 
</div> 

<div id="horizontal"> 
    <img src="700x400.jpg"/> 
</div> 

Тогда в CSS части говоря что-то вроде этого:

#horizontal 
{ 
    background-color:white; 
    width:900px; // Width equal to the widest image in your slideshow 
    height:700px; // Height equal to the image of max height in your slideshow 
}