ウィンドウサイズに合わせてレスポンシブ表示するカルーセルスライドのjQueryプラグイン-Elastislide

ウィンドウサイズに合わせてレスポンシブ表示するカルーセルスライドのjQueryプラグイン-Elastislide

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

この記事は jquery.elastislide.js の v1.1.0 についての使用方法です。バージョンが違う場合は使い方やオプションも変更されている可能性があるため、配布元のページにて使用方法をご確認下さい。

サンプルデモ

配布元のサンプルデモ

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

Related Article

4 Comments & Tracbacks

  • ai 2011-12-28 9:40 AM

    突然のメール失礼します。
    Elastislideのカスタマイズで検索したどり着きました。

    やりたい事ですが、現状のボタンクリックも残しつつ、デフォルトでは自動で動かしておきたい。
    またマウスオーバで停止し、画像をクリックするとリンクページへ移動させたい。

    このようなカスタマイズにお力お貸しいただければ幸いです。

    Reply

    • admin 2011-12-28 11:53 AM

      >aiさんへ

      初めまして。
      Elastislideはデフォルトの機能ではオートスライドの機能はついていないようですね。仰っている機能が初めからついているSlides, A Slideshow(自分の記事ですみません)があります。ただこちらはレスポンシブにはなっていません。私は使ってみた事はありませんがこちらの”FLEXSLIDER”が仰っている機能もつけれそうであり、レスポンシブにもなっているようです。

      Reply

  • ai 2011-12-28 12:27 PM

    早々のご返答ありがとうございます。
    「Slides, A Slideshow」は解説付なのでとても助かります。

    教えていただいた「FLEXSLIDER」…javaScriptに加え英語も苦手ですが触ってみますね。

    両者を参考にチャレンジしてみます(^^)
    クリアしていい年迎えたい(^^ゞ

    Reply

    • admin 2011-12-28 4:24 PM

      >aiさんへ
      あまりお役にたてずすみません…私もjavaScriptは苦手です(・ω・; )
      「FLEXSLIDER」は解説付きの日本語のブログ記事が沢山あるようなので大丈夫だと思います!
      はい!ぜひよい年を迎えましょう(^ー^)ノ

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能