[JS]キャプションのアニメーションがかっこよすぎ、スマフォもIEも対応のコンテンツスライダー -iView Slider

Post on:2012年7月25日

画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。

デモのキャプチャ

iView Slider (jQuery)

iView Sliderの特徴

iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。

  • IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。
  • iOS, Androidのスマートフォンもサポート。
  • サイズは変更可能で、レスポンシブレイアウトに対応。
  • フレキシブルで、カスタマイズに優れています。
  • 多言語対応。
  • キーボード操作、タッチデバイスのジェスチャにも対応。
  • エフェクトは35種類。
  • キャプションはアニメーション表示対応。
  • スライドの数は無制限。

iView Sliderのデモ

デモではキャプション付きのイメージスライダーをはじめ、さまざまなスライダーがあります。

デモのキャプチャ

デモページ: Regular

キャプションが気持ちよくアニメーションで動きます。
スライド時にもさまざまなエフェクトが適用されています。

デモのキャプチャ

デモページ: Multiple

1ページに複数のスライダーを設置することももちろん可能。

デモのキャプチャ

デモページ: Regular with API

iViewではメソッド、プロパティ、コールバックなどのAPIも用意されています。

デモのキャプチャ

デモページ: Responsive、幅1200pxで表示

レスポンシブレイアウトももちろんサポート。

デモのキャプチャ

デモページ: Responsive、幅780pxで表示

表示サイズに合わせて、スライダーのサイズを変更します。

デモのキャプチャ

デモページ: Banner

ちょっと変わっているのが、このローテーションバナー。
Flash？と見間違うほどの見栄えです。

iView Sliderの使い方

外部ファイル

スクリプトとスタイルシートをhead内に記述します。

<link rel="stylesheet" href="iview.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="raphael-min.js" type="text/javascript"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script src="iview.encoded.js" type="text/javascript"></script>

HTML

スライダーはdiv要素で実装します。

<div id="iview">
    <!-- Slide 1 -->
    <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>
    <!-- Slide 2 -->
    <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div>
</div>

キャプションはdiv要素に「iview-caption」のclassを与えて実装します。

<div id="iview">
    <!-- Slide 1 -->
    <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg">
        <!-- Caption -->
        <div class="iview-caption" data-x="0" data-y="0" data-width="400" data-height="300" data-transition="wipeRight" data-speed="700"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
    </div>
    <!-- Slide 2 -->
    <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg">
        <!-- Caption -->
        <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>
    </div>
</div>

JavaScript

jQueryのセレクタでラッパーを指定し、スクリプトを実行します。

<script type="text/javascript">
$(document).ready(function() {
    $('#slider').iView();
});
</script>

スライダの実装に使用するdata属性やスクリプトのオプションなど、詳しい実装方法はダウンロードファイルの「documentation」を参照ください。

sponsors

top of page

©2024 coliss