すべてロードが完了してから画像を表示

.home-slider {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    &.slick-initialized {
        visibility: visible;
        opacity: 1;  
    }
}

スライドの高さを揃える

.slick-track {
	display: flex;
}
.slick-slide {
	height: inherit;
}

スライド間のマージン

.slick-slide {
	margin: 0 15px;
}

PC/スマートフォンでは無効にする

「すべてロードし終わってから画像を表示」対応している場合は、下記を有効化する幅に限定すること!そうしないと無効化した幅で見えなくなってしまう

opacity: 0;
visibility: hidden;

const mqSlick = matchMedia('(max-width: 767.98px)');
function changeHomeSlick(mqSlick) { 
    if(mqSlick.matches === true) {
        $('#js-home-slider').slick({
            autoplay: true,
            nextArrow: '<div class="slick-next slick-next-b home-learn-slick-next-b"></div>',
            prevArrow: '<div class="slick-prev slick-prev-b home-learn-slick-prev-b"></div>',
            centerMode: false,
            slidesToShow: 1
            responsive: [
			{
				breakpoint: 767,
				settings: 'unslick' //これをいれておくと確実!
			}
            ]
        });
    } else {
        $('#js-home-slider').filter('.slick-initialized').slick('unslick');
    }
}
mqSlick.addListener(changeHomeSlick);
changeHomeSlick(mqSlick);

スライド間のマージン

/* the slides */
.slick-slide {
	margin: 0 10px;
}
/* the parent */
.slick-list {
	margin: 0 -10px;
}

コメントを残す

メールアドレスが公開されることはありません。