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

サンプル

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

やり方

HTMLはこんな感じ｡

<div id="bxslider">
	<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(){
	//bxSlider定義
	let bxslider = $("#bxslider").bxSlider({
		auto: true,
		touchEnabled:false
	});

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

ごちゃっとしてしまいましたが

ボタンがクリックされた際､一度「bxslider.destroySlider();」でbxSliderを解除｡
スライドの並び替えを行い､再度bxSliderを実行しています｡

コメント

「できました！」などの報告もお待ちしております｡