スライドギャラリー

こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回はスライドギャラリーを実装していきます。

Flash非対応デバイス用のスライドギャラリー

iPhoneやiPadなど、
Flash非対応のデバイスが主流になった今、
スライドギャラリーの実装はJavaScriptで作ることが多くなりました。

スライドギャラリーのHTMLを用意する

スライドギャラリー

スライドギャラリーを表示するdiv要素は、
id属性slideGalleyとして、その内側にスライドギャラリーで利用するパーツを配置していきます。

スライド部分のul/li要素にはid属性slideを指定し、
li要素にスライドギャラリーで表示する画像を並べます。

またjQueryを利用してスライドの数だけページングボタンを挿入します。

CSSですが#slideGalleyにはwidth:650pxとoverflow:hiddenを指定します。

矢印ボタンやページングをposition:absoluteで配置するため、
#slideGalleryのpositionはrelativeに設定します。

#slideは、ギャラリー部分のli要素をfloatで横並べにしていくので、
画像の数が増えても対応できるようにwidthの値を10000pxに指定しています。

最後にIE7はdisplay:inline-blockに対応していませんが、
*display:inlineと*zoom:1を追加すると利用できます。

次にJavaScriptです。

4〜7行目ではスライド下部に配置するページング(li要素)を、
#paging内に挿入しています。

ここではeach(function(){…})で、
#slideの画像の数と同じ数だけのページングボタンを挿入する処理をしています。

挿入するページングのli要素には、
attr()を使ってdata-img属性を設定します。

data-img属性は、
HTML5で追加されたカスタムデータ属性を使って独自に定義した属性で、
値にはページングに対応するスライド画像のURLを格納します。

具体的には、スライドのimg要素のerc属性の値を取り出して設定しています。

全てのページングの挿入後、
最初のli要素にaddClass()でactiveというclassを追加します。

次は右矢印ボタンがクリックされた時の挙動です。

スライドアニメーション中に右矢印が連続でクリックされても誤作動を起こさないように、
セレクターを#slide:not(animated)として、
#slideがアニメーション中でない場合のみ対象とするようにしています。

アニメーションは、
1枚目のスライドの横幅をマイナスにした値を#slideのmargin-leftに指定することで、
スライドを左に動かします。

animate()やcss()は、
数字の単位を省略して値を指定するとpxと解釈されます。

アニメーション終了時のコールバック関数では、
#slideのmargin-leftの値を0に変更して$(“#slide li:first-child”)をappend()する処理で、
#slideの最初のli要素が#slideの最後に挿入されます。

またもう一つの処理として、
removeClass()で#paging内のclass属性activefが付いている要素から、
class属性activeを取り除き、
addClass()で現在表示しているスライドのページングにclass属性を付け直します。

現在表示しているスライドのページング要素は$(“#slide li:first-child img”)で取得できるので、
attr(“src”)でスライドのURLを取得しています。

ページングのli要素には対応する画像のURLがdata-img属性に指定されているので、
属性セレクターで対応するページングを取得できます。

左矢印ボタンの挙動も同様に、
右矢印ボタンの挙動のように記述していきます。

>>デモをチェックする

自動でスライドするギャラリーを実装

次に自動でスライドするギャラリーを実装していきます。

スライドギャラリーは3000ミリ秒(3秒)ごとに次のスライドに切り替わるように設定します。

また#slideGalleyにマウスが乗っているときは自動でスライドしないようにし、
マウスが#slideGalleyから外れた時に再びスライドするように設定します。

左右の矢印も、
#slideGalleyにマウスが乗っているときだけ表示するようにします。

最初に先ほどのCSSに以下を追記します。

次にJavaScriptに以下の内容を追記します。

自動スライドの実行では、
setInterval(…)を利用して3000ミリ秒ごとに右矢印ボタンのクリックを実行しています。

click()などのイベントは()内を空にして記述することで、
擬似的にイベントを発生させることが可能です。

またhover()を利用して#slideGalleyにマウスが乗った時に左右の矢印を非表示にし、
clearInterval()でタイマーを停止します。

マウスが外れた時に左右の矢印を表示し、
タイマーを再び動作させて自動スライドを再開します。

>>デモをチェックする

ホームページ制作・WEBコンサルティングのご相談は無料

JOYCONNCTでは、社内の人材不足やノウハウ不足により、
WEB集客に関するお悩みを抱えられている中小企業様のサポートをしております。

TEL: 0742-55-4737/営業時間: 9:00〜18:00(平日)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事