memocarilog

表示するウィンドウのサイズに合わせて、画像サイズを変更して表示するカルーセルスライドのjQueryプラグインです。オプションを指定して、表示画像のサイズや、表示場所、スピード等が設定できます。使い方などをまとめました。

サンプルデモ

配布元のサンプルデモ

Elastislide – A Responsive Image Carousel

ダウンロード

スクリプトは以下のページ、
codrops/Elastislide
又は、以下のページよりダウンロード可能です。
Elastislide – A Responsive jQuery Carousel Plugin

Elastislide を動かすには prefixed / csstransitions などが含まれた Modernizr が必要です。「Modernizr: the feature detection library for HTML5/CSS3」よりフルバージョンをダウンロードするか、ダウンロードできるサンプルファイル中の modernizr.custom.17475.js ファイルをコピーして使いましょう。（もしくは、同じように必要な機能を modernizr でカスタムしましょう。）

※スワイプで画像送りを行いたい時は、同包されている jQuery++ スクリプトが必要なようです。

使い方

HTML コード

HTML はシンプルにリストでマークアップします。

<ul id="carousel" class="elastislide-list">
	<li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
	<li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
	<li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
	<!-- ... -->
</ul>

CSS コード

細かいところは、サンプルの elastislide.css をご確認下さい。サンプルの CSS の中で以下の部分の指定はカルーセル表示に必要な感じでした。

.elastislide-wrapper {
	position: relative;
    overflow: hidden;
}
..elastislide-carousel {
	overflow: hidden;
	position: relative;
}
.elastislide-carousel ul {
	position: relative;
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
}
.elastislide-horizontal ul {
	white-space: nowrap;
}
.elastislide-carousel ul li {
	margin: 0;
	-webkit-backface-visibility: hidden;
}
/*橫スライドにする場合必要*/
.elastislide-horizontal ul li {
	display: inline-block;
}
/*縦スライドにする場合必要*/
.elastislide-vertical ul li {
	display: block;
}
.elastislide-carousel ul li a {
	display: inline-block;
	width: 100%;
}

プラグインを呼び出すと、HTML に置いたリスト要素を囲む div や ナビ の要素が自動的に追加されます。その要素へスタイルをつけています。どのような構造になっているかはデベロッパーツールで確認されるとよいと思います。

jQuery コード

jQuery 本体・modernizr・elastislide を読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/modernizr.custom.44096.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>

続けて以下のように elastislide を呼び出します。画像を読み込んだ後でないと動かないため、window.onload で読み込むか、プラグイン本体や呼び出しの記述を body 終了タグ直前に記述します。これで基本の設定は完了です。

<script type="text/javascript">
window.onload = function(){
    $( '#carousel' ).elastislide();
}
</script>

オプション

Elastislide は横方向だけでなく、縦方向にスライドしたり、スライドスピードの変更など、いくつかのオプションが用意されています。以下のように指定することでそれぞれのオプションの使用が可能です。

window.onload = function(){
    $( '#carousel' ).elastislide({
    // 'vertical' を指定で縦方向へスライド
    orientation : 'horizontal',
    // スライドスピードを指定
    speed : 500,
    // スライドの動きを指定
    easing : 'ease-in-out',
    // 縮小した時の表示アイテム数を指定
    minItems : 3,
    // 最初に表示する画像を指定
    start : 0,
            
    // コールバック
    onClick : function( el, position, evt ) { return false; },
    onReady : function() { return false; },
    onBeforeSlide : function() { return false; },
    onAfterSlide : function() { return false; }
});
}