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

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

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


関連記事

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

作ったもの

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

イメージ

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

150310-1

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

150310-2

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

150310-3

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

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

左寄り & 切れちゃう

150310-4

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

style.css(Glide.js)

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

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

150310-5

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

画像の横幅を100%に

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

.slider__item img {
	width: 100%;
}

これも追加すると、

150310-6

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

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

.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;
}
150310-7

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

.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;
}

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

150310-8

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

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

公開日:2015/03/10

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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