スリックカルーセル - ページをリロードするとすべての画像が表示されます

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, 
}); 

iは、コンテナの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; 
}