javascript 171106 slickオプションで〇〇枚目にスライドした时にjsを実行する

Posted 2021-05-04

h2 {
	.black {
		display: block !important;
	}
	.white {
		display: none !important;
	}
	&.sanmaimeactive {
		.black {
			display: none !important;
		}
		.white {
			display: block !important;
		}
	}
}

<h2>
	<img src="images/home/img_main_tit_b.png" alt="「ありがとう」と「これからも」を一緒に伝えたい。" class="black">
	<img src="images/home/img_main_tit_w.png" alt="「ありがとう」と「これからも」を一緒に伝えたい。" class="white">
</h2>

$(function(){
	$('.box_slide').slick({
		autoplay: true,
		autoplaySpeed: 2500,
		speed: 800,
		dots: true,
		arrows: false
	}).on("afterChange", function(event, slick, currentSlide, nextSlide) {
		switch (currentSlide){
			case 2:
		// 3枚目のスライド
		$(".con_slide").find("h2").addClass("sanmaimeactive");
			break;
			default:
			// その他のスライド
			$(".con_slide").find("h2").removeClass("sanmaimeactive");
			break;
		}
	});
});