レスポンシブなカルーセルを作る。

レスポンシブ対応のスライドショーやカルーセルプラグインはいくつかあるのですが、
今回は、画面サイズによって表示する数も変えるやつを実装してみました。
(といっても自分で一からJSを書いたわけではないです…)

Demo

対応ブラウザ

  • Firefox
  • Chrome
  • IE8~
  • iPhone / iPad(Safari)
  • Android (※機種によっては怪しいかも…)

使ったjS

今回はresponsive_carouselを使ってます。
responsive_carouselは単体だと動かないので他にも下記のjsを読み込んでます。

ModernizerはCSS3のTransitionsを使うのでそれ用に読み込んでるっぽいです。
hammerの方はタップ、ダブルタップ、スワイプ、ドラッグ、ピンチなどタッチデバイス用のイベントをサポートしてくれるjsです。

jsの設定

※サンプルではJSの設定をindex.htmlの方に書いてます。

ドキュメントの幅に対して要素をいくつ表示するか設定

if (i > 960) {m = 4;}
else if (i > 640) {m = 3;}
else if (i > 480) {m = 2;}
else {m = 1}
return m;

これでウィンドウの幅を変えてみたら、
表示する数が変わります。
PCだったら画図は4つ、iphoneだったら1つで表示してるかと思います。

次へ、前へボタンの位置設定

画像で上下中央表示にしたかったのでJSを追加してます。

var centerArrows = function(){
	sliderH = $('.slider').height(),
	arrowH = $('.arrow img').height(),
	arrowT = ( sliderH - arrowH ) * 0.5;
	$('.arrow').css('top',arrowT);
}

CSSの設定

画像の横幅を100%にして自動で収縮するようしてます。
ただ100%にして画像の隙間をつけるとはみ出ちゃう…ってことで、
今回はbox-sizing プロパティ(※IE6.7非対応)使ってます。

.slider li img {
  width: 100%;
  padding: 0 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

レスポンシブ対応は、今まであまり使う機会がなかったCSSやJSを使うことになるので楽しい反面、
もっと勉強しておかねばと思いました。。