【bxSlider】スライドを動的に追加したり削除したり増減に対応する方法
jQueryのスライダープラグイン「bxSlider」でスライドを動的に追加したり削除したり､増減に対応するサンプルコードをご紹介します｡
サンプル
「このスライドを削除」をクリックすると､スライドが削除されます｡
次の画像をクリックすると､現在のスライドの次に追加されます｡
次の画像をクリックすると､末尾に追加されます｡
やり方
こんなHTMLです｡
追加は「現在のスライドの次に追加」モードと「末尾に追加」モードを用意してますが､片方でも大丈夫です｡
<!--スライダー-->
<div id="bxslider">
<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(){
//bxSlider定義
let initial = 0;
let bxslider = $("#bxslider").bxSlider({
auto: true,
touchEnabled:false,
startSlide: initial,
onSlideAfter: function($slideElement){
$("#bxslider .slide").removeClass("active-slide");
$slideElement.addClass("active-slide");
}
});
//現在のスライドの次に追加
$(".add_list img").on("click", function(){
//クリックした画像のsrcを取得
let src = $(this).attr("src");
//現在のスライドにクラス付与
if($(".bx-wrapper #bxslider .active-slide").length){
$(".bx-wrapper #bxslider .active-slide").addClass("_current");
}else{
//active-slideが無ければ最初のスライドにクラス付与
$(".bx-wrapper #bxslider .slide:not(.bx-clone)").eq(0).addClass("_current");
}
//bxSlider解除
bxslider.destroySlider();
//現在のスライドが何枚目か数える
initial = $("#bxslider .slide._current").index();
//現在のスライドの次にスライド追加
$("#bxslider ._current").after('<div class="slide"><img src="'+src+'"><button>このスライドを削除</button></div>');
//クラス削除
$("#bxslider ._current").removeClass("_current");
//再度bxSlider
bxslider = $("#bxslider").bxSlider({
auto: true,
touchEnabled:false,
startSlide: initial,
onSlideAfter: function($slideElement){
$("#bxslider .slide").removeClass("active-slide");
$slideElement.addClass("active-slide");
}
});
//削除再定義
remove();
});
//末尾に追加
$(".add_list_last img").on("click", function(){
//クリックした画像のsrcを取得
let src = $(this).attr("src");
//現在のスライドにクラス付与
if($(".bx-wrapper #bxslider .active-slide").length){
$(".bx-wrapper #bxslider .active-slide").addClass("_current");
}else{
//active-slideが無ければ最初のスライドにクラス付与
$(".bx-wrapper #bxslider .slide:not(.bx-clone)").eq(0).addClass("_current");
}
//bxSlider解除
bxslider.destroySlider();
//現在のスライドが何枚目か数える
initial = $("#bxslider .slide._current").index();
//末尾にスライド追加
$("#bxslider").append('<div class="slide"><img src="'+src+'"><button>このスライドを削除</button></div>');
//クラス削除
$("#bxslider ._current").removeClass("_current");
//再度bxSlider
bxslider = $("#bxslider").bxSlider({
auto: true,
touchEnabled:false,
startSlide: initial,
onSlideAfter: function($slideElement){
$("#bxslider .slide").removeClass("active-slide");
$slideElement.addClass("active-slide");
}
});
//削除再定義
remove();
});
//削除定義
function remove(){
//イベントを一旦削除
$("#bxslider .slide button").off();
//「このスライドを削除」をクリックしたとき
$("#bxslider .slide 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");
}
//bxSlider解除
bxslider.destroySlider();
//次のスライドが何枚目か数える
initial = $("#bxslider .slide._current").index();
//クラス削除
$("#bxslider ._current").removeClass("_current");
//スライドを削除
$("#bxslider ._remove").remove();
//再度bxSlider
bxslider = $("#bxslider").bxSlider({
auto: true,
touchEnabled:false,
startSlide: initial,
onSlideAfter: function($slideElement){
$("#bxslider .slide").removeClass("active-slide");
$slideElement.addClass("active-slide");
}
});
});
}
remove();
});かなりごちゃごちゃしてしまいましたが､
スライドを追加・削除する際は
一度「bxslider.destroySlider();」でbxSliderを解除し､appendでスライドを追加または､removeでスライドを削除｡
その後､再度bxSliderを実行します｡
現在のスライドの次に追加したり､追加削除した際に再び現在のスライドからスタートするために､色々工夫をしています｡
コメント
「できました！」などの報告もお待ちしております｡
お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡
または以下のボタンからなにか買って応援 (PR)