슬릭 캐 러셀 - 페이지를 다시로드 할 때 모든 이미지가 표시됩니다.

Question

제품 이미지 (주 이미지 및 축소판 - https://d26dzxoao6i3hh.cloudfront.net/items/1A1K120k2o460k0P2d2P/Image%202017-10-25%20at%201.54.21%20PM.130n063B272P.png)를 표시하려면 슬릭 캐로 셀을 사용하려고합니다.

그러나 사용자가 페이지를 다시로드 할 때 - 모든 이미지는 다음과 같이 표시됩니다 : https://d26dzxoao6i3hh.cloudfront.net/items/3u1u0I1i21230a1u0w2e/Image%202017-10-25%20at%201.51.01%20PM.1X1M2p1S2D23.png. 그리고 페이지가로드 된 후 괜찮아 보입니다. 회전 목마에 대한 나의 JS 코드 :

$('.product__image-for').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    adaptiveHeight: true, 
    asNavFor: '.product-thumbnails', 
    arrows: true, 
    fade: true 
}); 
$('.product-thumbnails').slick({ 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    asNavFor: '.product__image-for', 
    arrows: false, 
    dots: false, 
    centerMode: true, 
    focusOnSelect: true, 
}); 

난 컨테이너 DIV의 높이를 제한해야 하는가? 오버플로 숨김을 사용 하시겠습니까? 또는 Slick 설정 중 일부일 수도 있습니다. 누구든지이 문제에 직면 했습니까?

도움 주셔서 감사합니다.

Answer 1

slick은 페이지가로드 된 후에 만 ​​초기화되고 스타일이 적용되기 때문에 발생합니다. 나는

$(window).load(function() { 
    // Handler for .load() called. 
}); 

함수에 초기화 코드를 넣어 권하고 싶습니다

.product__image-for:not(.slick-initialized) .your-slide-selector { 
    display none; 
} 
.product__image-for:not(.slick-initialized) .your-slide-selector:first-child { 
    display block; 
} 

Answer 2

: 당신처럼, 초기화되지 않은 상태로 매끄러운 슬라이더를 표시하기 위해 추가 CSS 스타일을 만들어야합니다. 그 매끄러운에 의해 모든로드가 완료되면 즉시 초기화 가져옵니다.

Answer 3

@ 비행 어떻게 든이 나를 위해 일하지 않았다. 하지만 가시성과 불투명도가있는 다른 솔루션을 찾았습니다. 도와 주신 모든 분들께 감사드립니다!

.product__image-for, 
.product-thumbnails { 
    visibility: hidden; 
    opacity: 0; 
    transition: opacity 0.1s; 
} 

.product__image-for.slick-initialized, 
.product-thumbnails.slick-initialized { 
    visibility: visible; 
    opacity: 1; 
} 

.product__image-for .product__image-item { 
    display: none ; 
} 

.product__image-for .product__image-item:first-child { 
    display: block; 
    visibility: hidden; 
} 

.product__image-for.slick-initialized .product__image-item { 
    display: block; 
    visibility: visible!important; 
}