[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider

Post on:2014年9月10日

HTML5のシンプルなコード、CSS3を使ったかっこいいアニメーション、レスポンシブ対応でタッチデバイス対応、SEOにもフレンドリーで、W3C ARIAにも準拠した画像スライダーのスクリプトを紹介します。

脱jQueryを探している人にもちょうどいいと思います。

サイトのキャプチャ

Ideal Image Slider
Ideal Image Slider -GitHub

Ideal Image Sliderのデモ

デモはChrome, Safari, Firefox, Opera, IEは9+、またはスマホやタブレットでご覧ください。

デモのキャプチャ

デモページ：Standard

操作は左右のナビゲーション、矢印キーを使ったキーボード操作にも対応しています。

外観はCSSのテーマファイルで変更することができ、アニメーションの変更、ビュレットのナビゲーション、サムネイルのナビゲーション、フルスクリーンスライダー、video/audioもサポートしています。

ダウンロードファイルに含まれているデモは、Retina用の画像も用意されています。

デモのキャプチャ

ダウンロードファイルに含まれているデモ

デモのキャプチャ

デモを幅480pxで表示

Ideal Image Sliderの使い方

Step 1: 外部ファイル

当スクリプト・スタイルシートを外部ファイルとして記述します。
「default.css」はスライダーの外観を定義したデフォルトのテーマです。

<head>
  ...
  <link rel="stylesheet" href="ideal-image-slider.css">
  <link rel="stylesheet" href="themes/default/default.css">
</head>
<body>
  ...
  <script src="ideal-image-slider.js"></script>
</body>

Ideal Image SliderはVanilla JSで書かれており、他のスクリプトには依存していません。

Step 2: HTML

HTMLは非常にシンプルで、スライダーに表示する画像をimg要素で実装し、divで内包します。

<div id="slider">
  <img src="img/1.jpg" src="" alt="">
  <img data-src="img/2.jpg" src="" alt="">
  <img data-src="img/3.jpg" src="" alt="">
</div>

Retina対応にする時は、Retina用の画像（3@2x.jpg）を用意し、下記のように記述します。

  ...
  <img data-src="img/3.jpg" data-src-2x="img/3@2x.jpg" src="" alt="Use data-src-2x for HiDPI devices">
  ...

Step 3: JavaScript

外部スクリプトの下に記述し、スライダーのラッパーを指定し、スクリプトを実行します。

<body>
  ...
  <script>
    new IdealImageSlider.Slider('#slider');
  </script>
</body>

オプション

スクリプトのオプションでは、スライダーのサイズ、エフェクトなどを設定できます。

var slider = new IdealImageSlider.Slider({
    selector: '#slider', //スライダーのclass
    height: 400, // スライダーの高さ
    interval: 4000, //次のスライドを表示する間隔
    transitionDuration: 700, //アニメーションの時間
    effect: 'slide', // エフェクトの指定（slide/fade)
    disableNav: false, //ナビゲーションの有無
    keyboardNav: true, //キーボード操作の有無
    previousNavSelector: 'previousNav', // ナビゲーション（前へ）のclass
    nextNavSelector: 'nextNav', // ナビゲーション（次へ）のclass
});
slider.start();

また、スライダーの初期化、起動時、停止時などのcallback関数にも対応しています。

sponsors

top of page

©2024 coliss