로드시 slick 슬라이더 점핑 이미지를 수정하는 방법

Question

adaptiveHeight 속성이 false로 설정된 매끄러운 슬라이더가 있습니다. 그래서, 만약 내가 매끄러운 컨테이너의 첫 번째 슬라이드에 작은 이미지가 있다면 - 수직으로 중심에두고 왼쪽 영역은 배경색으로 채워질 것입니다 (예 : this image).

매끄러운 슬라이더 영역 높이를 계산하여로드시 '점핑'을 방지하려면 어떻게해야합니까? 슬릭 컨테이너에서 이미지 높이와 너비를 계산하는 방법을 아는 사람이 있습니까? 어떤 아이디어?

Answer 1

Slick을 초기화하기 전에 이미지의 높이를 확인하려면 ImagesLoaded과 같은 플러그인으로 매끄럽게 감쌀 수 있습니다. 이것이 스타일이 적용되지 않은 이미지의 플래시를 원하지 않는다면 처음에는 스타일을 숨기고 (예 : 화면의 왼쪽에서 절대적으로 위치 시키십시오) 이미지를로드 할 때이 스타일을 제거해야하는 스타일을 적용해야합니다 , 무언가 같이 :

$('#slider').imagesLoaded(function() { 
    // remove your hiding class 
    // initialise slick 
});