スライドアニメーション色々（スライダー）

Vegas Background Slideshow

設定：http://vegas.jaysalvat.com/documentation/transitions

カスタマイズ

.home-main-slider,
.vegas-slide {
    border-radius: 10px;
}


.vegas-animation-kenburns {
    animation: kenburns ease-out;
	background-position: top center !important;
}

@keyframes kenburns {
    0% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

CSS スライダー

すーーーっと動くやつ

---

Slick slider

覚え書き

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

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

スライドの高さを揃える

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

//必要に応じて a に height: inherit や height: 100%;

スライド間のマージン

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

スライド上にマージン

カードデザインなどでNEWアイコンなどを上にはみ出させる場合

.slick-slide {
	padding-top: 20px; //アイコン

}

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