ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【jQuery】スライドショーとポップアップ(モーダル)を両方使用し、作成したサンプル

2017年11月11日
logo_bxslider

スライダーとポップアップ(モーダル)の実装はよく使われる手法ですが、スライダーの要素をクリックしたらポップアップ(モーダル)がスライド表示されるという実装はそこまで多くないかと思います。
実際、検索してもサンプルが見当たらなかったのでいい機会だと思い今回作成しました!
レスポンシブにも対応(モーダル内は見対応)していますので、どなたかの参考にでもなれば幸いです。
今回、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の記述箇所(複製、変更する場合)

JavaScript
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にする)問題なく使用できるかと思います!

関連記事

  • 【jQuery】スマホ時にトップへ戻るボタンの表示非表示が一瞬チラつく場合の対処法2017年11月1日 【jQuery】スマホ時にトップへ戻るボタンの表示非表示が一瞬チラつく場合の対処法
  • 【jQuery】ファーストビュー(画面全体)に背景画像をスライダーで表示させる方法(prev , next , ページャー付き)2017年11月10日 【jQuery】ファーストビュー(画面全体)に背景画像をスライダーで表示させる方法(prev , next , ページャー付き)
  • コピペでOK! jQueryで上下連動タブの切り替えをする方法2019年1月27日 コピペでOK! jQueryで上下連動タブの切り替えをする方法
  • 【jQuery】要素にランダムかつ重複なしにクラスを付与する方法2019年1月27日 【jQuery】要素にランダムかつ重複なしにクラスを付与する方法
  • 【jQueryプラグイン】スクロールバーの太さ、色などをカスタマイズできるプラグイン ※mCustomScrollbar2016年8月12日 【jQueryプラグイン】スクロールバーの太さ、色などをカスタマイズできるプラグイン ※mCustomScrollbar

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.