【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部分

<!-- 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 -->

</ul>

</div>

<li>

contents1

</div>

</li>

<li>

contents2

</div>

</li>

<li>

contents3

</div>

</li>

</ul>

</div>

jsの記述箇所（複製、変更する場合）

// スライダーの設定
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);