【slick.js】スライドを動的に追加したり削除したり増減に対応する方法

2023-08-17

jQueryのスライダープラグイン「slick.js」でスライドを動的に追加したり削除したり､増減に対応する方法をご紹介します｡

サンプル

「このスライドを削除」をクリックすると､スライドが削除されます｡

次の画像をクリックすると､現在のスライドの次に追加されます｡

次の画像をクリックすると､末尾に追加されます｡

やり方

こんなHTMLです｡
追加は「現在のスライドの次に追加」モードと「末尾に追加」モードを用意してますが､片方でも大丈夫です｡

<!--スライダー-->
<div class="slider">
	<div class="slide"><img src="img01.jpg"><button>このスライドを削除</button></div>
	<div class="slide"><img src="img02.jpg"><button>このスライドを削除</button></div>
	<div class="slide"><img src="img03.jpg"><button>このスライドを削除</button></div>
	<div class="slide"><img src="img04.jpg"><button>このスライドを削除</button></div>
</div>

<!--現在のスライドの次に追加-->
<ul class="add_list">
	<li><img src="img01.jpg"></li>
	<li><img src="img02.jpg"></li>
	<li><img src="img03.jpg"></li>
	<li><img src="img04.jpg"></li>
</ul>

<!--末尾に追加-->
<ul class="add_list_last">
	<li><img src="img01.jpg"></li>
	<li><img src="img02.jpg"></li>
	<li><img src="img03.jpg"></li>
	<li><img src="img04.jpg"></li>
</ul>

そして､JSはこちら｡

$(function(){
	//slick定義
	function slick_start(initial){
		$(".slider").slick({
			autoplay: true,
			dots: true,
			centerMode: true,
			variableWidth: true,
			initialSlide: initial
		});
	}
	//初回実行
	slick_start(0);
	
	//スライドを削除 定義
	function remove(){
		//イベントを一旦削除
		$(".slider.slick-initialized button").off();
		//「このスライドを削除」をクリックしたとき
		$(".slider.slick-initialized button").on("click", function(){
			let remove_slide = $(this).closest(".slide");
			//削除するスライドにクラス付与
			remove_slide.addClass("_remove");
			//次のスライドがあればクラス付与
			if(remove_slide.next(".slide").length){
				remove_slide.next(".slide").addClass("_current");
			}else{
				//無ければ現在のスライドにクラス付与
				remove_slide.addClass("_current");
			}
			//slick解除
			$(".slider.slick-initialized").slick("unslick");
			//次のスライドが何枚目か数える
			let next = $(".slider .slide._current").index();
			//クラス削除
			$(".slider ._current").removeClass("_current");
			//スライドを削除
			$(".slider ._remove").remove();
			//再度slick
			slick_start(next);
		});
	}
	remove();

	//現在のスライドの次に追加
	$(".add_list img").on("click", function(){
		//クリックした画像のsrcを取得
		let src = $(this).attr("src");
		//現在のスライドにクラス付与
		$(".slider.slick-initialized .slick-current").addClass("_current");
		//slick解除
		$(".slider.slick-initialized").slick("unslick");
		//現在のスライドが何枚目か数える
		let current = $(".slider .slide._current").index();
		//現在のスライドの次にスライド追加
		$(".slider ._current").after('<div class="slide"><img src="'+src+'"><button>このスライドを削除</button></div>');
		//クラス削除
		$(".slider ._current").removeClass("_current");
		//再度slick
		slick_start(current);
		//削除再定義
		remove();
	});

	//末尾に追加
	$(".add_list_last img").on("click", function(){
		//クリックした画像のsrcを取得
		let src = $(this).attr("src");
		//現在のスライドにクラス付与
		$(".slider.slick-initialized .slick-current").addClass("_current");
		//slick解除
		$(".slider.slick-initialized").slick("unslick");
		//現在のスライドが何枚目か数える
		let current = $(".slider .slide._current").index();
		//末尾にスライド追加
		$(".slider").append('<div class="slide"><img src="'+src+'"><button>このスライドを削除</button></div>');
		//クラス削除
		$(".slider ._current").removeClass("_current");
		//再度slick
		slick_start(current);
		//削除再定義
		remove();
	});
});

ちょっとごちゃっとしてしまいましたが､要は

一度「unslick」でslickを解除｡ remove()でスライドを削除したりappend()でスライドを追加したりして

再度slickを実行します｡

現在のスライドの次に追加したり､追加削除した際に再び現在のスライドからスタートするために､色々工夫をしています｡