Umbrella JS を使ってシンプルなスライダーを実装しました。

「Umbrella JS って何 ?」という方は次をご覧ください。

超軽量な JavaScript ライブラリ Umbrella JS を使ったら幸せになった
atuweb.net

完成イメージ

Umbrella JS 実装スライダーイメージ
Umbrella JS 実装スライダーイメージ
  • 一定間隔で画像を切り替え
  • ナビボタンのクリックで画像を切り替え
  • フェードイン・フェードアウト

画像と下部ナビボタンのみのシンプルなスライダーです。

実装

環境

  • Umbrella JS 2.10.0
  • Font Awesome

Font Awesome はナビボタンに使用しています。
(○ ● は、激しく縦位置がずれるため)

HTML

<div class="slider">
  <div class="images">
    <div class="slide"><img src="image_a.png"></div>
    <div class="slide"><img src="image_b.png"></div>
    <div class="slide"><img src="image_c.png"></div>
  </div>
  <div class="slide-buttons">
    <div class="slide-button" data-target="0"><i class="fa fa-circle-o"></i></div>
    <div class="slide-button" data-target="1"><i class="fa fa-circle-o"></i></div>
    <div class="slide-button" data-target="2"><i class="fa fa-circle-o"></i></div>
  </div>
</div>

画像とボタンを並べています。

CSS

/* スライダーの定義 */
.slider {
  position: relative;
}
.slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: all 750ms;
}
.slide.active {
  opacity: 1;
  transition-delay: 150ms;
}

/* ボタンの定義 */
.slide-buttons {
  position: absolute;
  left: 0;
  bottom: .75rem;
  width: 100%;
  text-align: center;
}
.slide-button {
  margin: 0 .25rem;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}

スライドさせる画像は position:absolute で絶対位置を指定し、opacity:0 で透明にした状態で重ねます。
画像を表示する場合は opacity:1 に戻します。

複数レイヤーのうち、1 枚だけを可視状態にすることでスライダーを表現しています。

JavaScript

(function(u) {
  // インターバル設定 (ミリ秒)
  var durationMs = 5000;
  var $items     = u('.slide');
  if ($items.length <= 1) {
    return;
  }
  var $buttons = u('.slide-button');

  // 画像を切り替える処理
  var slide = function(index) {
    current = index;
    $items.each(function(node, i) {
      var $item = u(node)
      if ($item.hasClass('active')) {
        $item.removeClass('active');
      }
      if (i == index) {
        $item.addClass('active');
      }
    });
    $buttons.each(function(node, i) {
      var $button = u(node)
      if (i == index) {
        $button.html('<i class="fa fa-circle"></i>');
      } else {
        $button.html('<i class="fa fa-circle-o"></i>');
      }
    });
  };
  slide(0);

  // タイマー処理
  var current = 0;
  var timerId = -1;
  var setTimer = function() {
    if (timerId > 0) {
      clearInterval(timerId);
    }
    timerId = setInterval(function() {
      var index = current + 1
      if (index >= $items.length) {
        index = 0
      }
      slide(index);
    }, durationMs);
  };
  setTimer();

  // ナビボタンクリック時の操作
  $buttons.on('click', function() {
      var index = u(this).attr('data-target');
      if (current == index) {
        return;
      }
      slide(index);
      setTimer();
  });
})(u);

node の扱い方が Umbrella JS 特有ですね。


要素に .active 追加することで、表示/非表示を切り替えています。

関連して、ナビボタンの操作や、一定間隔で画像を切り替えるためのタイマー処理が入っています。

おわりに

Umbrella JS の活用事例として、スライダー実装をご紹介いたしました。

多少知識のある方であれば、アニメーションをスライドイン・スライドアウトに変更することもできると思います。

行数も少なく、読みやすいコードではないかと思います。
ぜひ、いろいろ手を入れてみてください。


Web デザインや Web プログラムを 1 から勉強されたい方は TechAcademy [テックアカデミー] プログラミングのオンラインスクールのCodeCamp など、スクールを有効活用すると近道ができます。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

たにぐちまこと
出版社:マイナビ出版  発売日:2017-03-27

Amazonで詳細を見る

この記事の著者 Queue 8 Studio みちひこ