【jQuery】スライドショーとポップアップ（モーダル）を両方使用し、作成したサンプル
2017年11月11日
スライダーとポップアップ（モーダル）の実装はよく使われる手法ですが、スライダーの要素をクリックしたらポップアップ（モーダル）がスライド表示されるという実装はそこまで多くないかと思います。
実際、検索してもサンプルが見当たらなかったのでいい機会だと思い今回作成しました！
レスポンシブにも対応（モーダル内は見対応）していますので、どなたかの参考にでもなれば幸いです。
今回、bxsliderプラグインを使用して作成しました。
【デモ】スライダー×ポップアップ（モーダル）
https://hiroyayabiku.github.io/slider—slider-and-modal—bxslider/
スポンサードサーチ
ソースのダウンロードはこちら
https://github.com/HiroyaYabiku/slider—slider-and-modal—bxslider
簡単な使い方について
クラス名を変更して使用する場合には、基本的に下記2点（html、js）が変更箇所となることを覚えてしまえば初心者でもすぐに実装できるかと思います！
では早速みていきましょう。
html部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- slider 1 --> <div class="sliderWrap"> <ul class="slider1 slider"> <li><a href="#slider1"><img src="img/01.jpg"></a></li> <li><a href="#slider2"><img src="img/02.jpg"></a></li> <li><a href="#slider3"><img src="img/03.jpg"></a></li> </ul> <div class="slide-counter1 slide-counter"><span></span> / </div> </div><!-- sliderWrap --> <div class="sliderModalWrap1 sliderModalWrap"> <ul class="sliderModal1 sliderModal"> <li> <img src="img/01.jpg"> <div class="sliderModal__contents"> contents1 </div><!-- sliderModal__contents --> </li> <li> <img src="img/02.jpg"> <div class="sliderModal__contents"> contents2 </div><!-- sliderModal__contents --> </li> <li> <img src="img/03.jpg"> <div class="sliderModal__contents"> contents3 </div><!-- sliderModal__contents --> </li> </ul> </div><!-- sliderModalWrap --> |
jsの記述箇所（複製、変更する場合）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// スライダーの設定 var slider1 = new SliderInit('.slider1','.slide-counter1','.slide-counter1 span'); // モーダルの設定 var sliderModalSet1 = { el: '.sliderModal1', sliderModaleEl: '.slider1 li a', sliderModaleWrap: '.sliderModalWrap1', mode: 'fade', speed: 400 } var sliderModal1 = new SliderModalInit(sliderModalSet1); |
上記のコードで、htmlとjsのクラス名がリンクしているので、html、jsどちらかのクラス名を変更する際には注意する必要があります。
複数スライダーを作成したい際にも、上記のコードをコピペで複製して値を変えてあげれば（slider1→slider2にする）問題なく使用できるかと思います！
