2015
3
10
jQueryでアコーディオンメニューと干渉しないスライダーのメモ

スマホ用に、スライドショーとアコーディオンのメニューを組み合わせたかったのですが、プラグインによっては干渉してなかなかうまく動かなかった…。いろいろチャレンジしたので、備忘録として。


関連記事

画像のスライドショーがあるページに、上記のメニューを組み合わせてみたいなぁと思ってやってみたメモです。

作ったもの

レスポンシブになってるので、ウインドウサイズを変えて見てみてください。主にはスマホで見る目的です。

イメージ

こんな感じです。需要があるかどうかはちょっと分かりませんがw

150310-1

画像のスライドショーがあって、右上にあるメニューをタップすると、

150310-2

メニューが開いて、中に更にアコーディオンなナビが。

150310-3

スライドショーも動きつつ、アコーディオンもちゃんと開閉するよ!

使ったプラグインはGlide.js

いろいろ試したのですが、最終的にはこちらを使わせていただきました。

レスポンシブでスマホやタブレット端末のスワイプに対応、軽量で動作が軽く読み込みが早いというのも特徴のようです。

公式

ダウンロード

使い方

この記事を書いた時点では Version: 1.0.7 で、IE7以上で動作確認できました。

実装

Glide.js の実装方法は上記のリンクにありますのでそちらをご参照ください。jQuery, DL した Glide.js, style.css を読み込んで説明の通りに記述するだけなので難しくありません。

html

アコーディオンに関しては、前書いたものそのままなので割愛します。サンプルのためシンプルに書いていますが、タイトルやメニューなどはもっと見栄え良く工夫したほうがいいと思います。(わたしも本番環境では画像使ったりしました。)

css

こちらもアコーディオンの CSS は割愛。スライドショーのほうは、Glide.js の CSS を少しいじったので後述します。

jQuery

Glide.js の設定は3~7行目までです。他にも色々できます。

Glide.jsオプション(抜粋)

オプション デフォルト 説明
autoplay 4000 自動再生。true の場合はスライドが停止している時間をミリ秒で指定。オフにする場合は false。
hoverpause true マウスオーバーでスライダーを一時停止
circular true 最後のアイテムの後、スムーズに最初のアイテムのスライドが始まる。false にすると、一度最初に戻る動作をした後、またスライドする。
animationDuration 500 スライドアニメーションの時間(ミリ秒)
arrows true next/prev の表示/非表示。
navigation true ナビゲーションの表示/非表示。
keyboard true キーボードの矢印キーでスライドさせる
touchDistance 60 タッチスワイプするための最小距離。true の場合は距離で指定。タッチをオフにする場合は false。

カスタマイズ

Version: 1.0.7 時点での Glide.js を使いましたが、もうちょっとここを…、と思ったところを。

左寄り & 切れちゃう

150310-4

デフォルトのままだと、左寄りになってるのでウインドウサイズが画像より大きいと右が余っちゃいました。画像も左基点で右側は切れてしまいます。

style.css(Glide.js)

Glide.js の CSS にこいつを追加してやると、

150310-5

中央にきてくれます。画像じゃないテキストコンテンツなんかも置けるので、中央寄せにしておいてもいいかも。

画像の横幅を100%に

とはいえ、ウインドウサイズが小さい場合に画像が切れちゃうままなので、

これも追加すると、

150310-6

ウインドウサイズによって画像を横幅いっぱいにしてくれます。縦は可変になるので、お好みで。

ナビゲーションを変えてみる

150310-7

デフォルトのナビゲーションはこんな感じ。こいつを、

このように変えてやると、

150310-8

こんなナビに。デモではこちらを使っています。

以上です! どなたかのお役に立てたら幸いですー!

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2015/03/10


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top