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

2015/03/10
Web
jQuery

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

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

作ったもの

デモ

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

イメージ

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

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

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

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

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

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

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

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

実装

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

html

<div id="title">
	<h1>タイトル</h1>
</div>

<div id="menu">
	<ul>
		<li><a class="nav_open">メニュー</a></li>
	</ul>
</div>

<nav id="slidenav">
	<ul class="accordion">
		<!-- 略 -->
	</ul>
	<p class="nav_close">メニューを閉じる</p>
</nav>

<div class="slider">
	<ul class="slider__wrapper">
		<li class="slider__item"><img src="images/1.jpg" alt="image1" /></li>
		<li class="slider__item"><img src="images/2.jpg" alt="image2" /></li>
		<li class="slider__item"><img src="images/3.jpg" alt="image3" /></li>
		<li class="slider__item"><img src="images/4.jpg" alt="image4" /></li>
	</ul>
</div>

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

css

#title{
	margin: 20px;
	float: left;
	}
#menu{
	margin: 20px;
	float:right;
	}

/* ナビ */
#slidenav{
	display: none;
	clear: both;
	margin: 10px 20px;
	padding: 20px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 1px 1px #ddd;  
	-moz-box-shadow: 0px 0px 1px 1px #ddd;  
	box-shadow: 0px 0px 1px 1px #ddd;
}
#slidenav p.nav_close{
	display: block;
	width: 100px;
	margin: 0 auto;
	font-size: 80%;
	}

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

jQuery

<script type="text/javascript">
	//スライダー
	$('.slider').glide({
		hoverpause: false,
		animationDuration: 1500,
		arrows: false
	});

	//スライドナビ
	$('.nav_open').click(function(){
		$('#slidenav').slideDown();
	});
	$('.nav_close').click(function(){
		$('#slidenav').slideUp();
	});
	
	//アコーディオンは省略
</script>

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 を使いましたが、もうちょっとここを…、と思ったところを。

左寄り & 切れちゃう

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

style.css(Glide.js)

.slider__item {
	text-align: center; /* アイテムの中央寄せ */
}

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

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

画像の横幅を100%に

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

.slider__item img {
	width: 100%;
}

これも追加すると、

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

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

.slider__nav {
  position: absolute;
  bottom: 30px;
}
.slider__nav-item {
  width: 12px;
  height: 12px;
  float: left;
  clear: none;
  display: block;
  margin: 0 5px;
  background: #fff;
}
.slider__nav-item--current {
  background: #ccc;
}
.slider__nav-item:hover {
  background: #ccc;
}

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

.slider__nav {
  position: absolute;
  bottom: 10px;
}
.slider__nav-item {
	width: 8px;
	height: 8px;
	float: left;
	display: block;
	margin: 0 8px;
	border-radius: 8px;
	background: #ccc;
	-webkit-box-shadow: 0px 0px 1px 1px #aaa;  
	-moz-box-shadow: 0px 0px 1px 1px #aaa;  
	box-shadow: 0px 0px 1px 1px #aaa;
}
.slider__nav-item--current{
	background: #fff;
}
.slider__nav-item:hover {
  background: #ccc;
}

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