【slick.js】スライドの並び替え機能を追加する方法

2023-09-07

jQueryのスライダープラグイン「slick.js」でスライドに並び替え機能を追加する方法をご紹介します｡

サンプル

「このスライドを左・右へ移動」をクリックすると､スライドが移動します｡

やり方

HTMLはこんな感じ｡

<div class="slider">
	<div class="slide">
		<p><img src="img01.jpg"></p>
		<button data-move="l">このスライドを左へ移動</button>
		<button data-move="r">このスライドを右へ移動</button>
	</div>
	<div class="slide">
		<p><img src="img02.jpg"></p>
		<button data-move="l">このスライドを左へ移動</button>
		<button data-move="r">このスライドを右へ移動</button>
	</div>
	<div class="slide">
		<p><img src="img03.jpg"></p>
		<button data-move="l">このスライドを左へ移動</button>
		<button data-move="r">このスライドを右へ移動</button>
	</div>
	<div class="slide">
		<p><img src="img04.jpg"></p>
		<button data-move="l">このスライドを左へ移動</button>
		<button data-move="r">このスライドを右へ移動</button>
	</div>
</div>

そして､JSはこちら｡

$(function(){
	//slick定義
	function slick_start(){
		$(".slider").slick({
			autoplay: true,
			dots: true,
			centerMode: true,
			variableWidth: true
		});
		//並び替え定義
		slick_move();
	}
	//初回実行
	slick_start();

	//並び替え定義
	function slick_move(){
		//イベントを削除
		$(".slider .slide button").off();
		//移動ボタンをクリックしたとき
		$(".slider .slide button").on("click", function(){
			//移動するスライドにクラス付与
			$(this).closest(".slide").addClass("_current");
			//data-move属性を取得
			let to = $(this).attr("data-move");
			//slick解除
			$(".slider.slick-initialized").slick("unslick");
			//移動するスライドのHTMLを取得
			let slideHTML = $(".slider .slide._current").prop("outerHTML");
			//「左へ」がクリックされたとき
			if(to == "l"){
				//前の要素を取得
				let prev = $(".slider .slide._current").prev();
				//移動するスライドを削除
				$(".slider .slide._current").remove();
				//前の要素があるとき
				if(prev.length){
					//前の要素の前に挿入
					prev.before(slideHTML);
				}else{
					//前の要素がないとき､末尾に挿入
					$(".slider .slide:last-child").after(slideHTML);
				}
			}else{
				//「右へ」がクリックされたとき
				//次の要素を取得
				let next = $(".slider .slide._current").next();
				//移動するスライドを削除
				$(".slider .slide._current").remove();
				//次の要素があるとき
				if(next.length){
					//次の要素の次に挿入
					next.after(slideHTML);
				}else{
					//次の要素がないとき､先頭に挿入
					$(".slider .slide:first-child").before(slideHTML);
				}
			}
			//._current削除
			$(".slider .slide._current").removeClass("_current");
			//slick属性を削除
			$(".slider .slide").removeAttr("tabindex role id aria-describedby aria-hidden")
			//再度slick
			slick_start();
		});
	}
});

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

ボタンがクリックされた際､一度「unslick」でslickを解除し､スライドの並び替えを行なってから再度slickを実行しています｡