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

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

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

完成イメージ

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

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

実装

環境

  • Umbrella JS 2.10.0
  • Font Awesome

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

HTML

 1<div class="slider">
 2  <div class="images">
 3    <div class="slide"><img src="image_a.png"></div>
 4    <div class="slide"><img src="image_b.png"></div>
 5    <div class="slide"><img src="image_c.png"></div>
 6  </div>
 7  <div class="slide-buttons">
 8    <div class="slide-button" data-target="0"><i class="fa fa-circle-o"></i></div>
 9    <div class="slide-button" data-target="1"><i class="fa fa-circle-o"></i></div>
10    <div class="slide-button" data-target="2"><i class="fa fa-circle-o"></i></div>
11  </div>
12</div>

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

CSS

 1/* スライダーの定義 */
 2.slider {
 3  position: relative;
 4}
 5.slide {
 6  position: absolute;
 7  top: 0;
 8  right: 0;
 9  bottom: 0;
10  left: 0;
11  opacity: 0;
12  transition: all 750ms;
13}
14.slide.active {
15  opacity: 1;
16  transition-delay: 150ms;
17}
18
19/* ボタンの定義 */
20.slide-buttons {
21  position: absolute;
22  left: 0;
23  bottom: .75rem;
24  width: 100%;
25  text-align: center;
26}
27.slide-button {
28  margin: 0 .25rem;
29  display: inline-block;
30  color: #fff;
31  cursor: pointer;
32}

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

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

JavaScript

 1(function(u) {
 2  // インターバル設定 (ミリ秒)
 3  var durationMs = 5000;
 4  var $items     = u('.slide');
 5  if ($items.length <= 1) {
 6    return;
 7  }
 8  var $buttons = u('.slide-button');
 9
10  // 画像を切り替える処理
11  var slide = function(index) {
12    current = index;
13    $items.each(function(node, i) {
14      var $item = u(node)
15      if ($item.hasClass('active')) {
16        $item.removeClass('active');
17      }
18      if (i == index) {
19        $item.addClass('active');
20      }
21    });
22    $buttons.each(function(node, i) {
23      var $button = u(node)
24      if (i == index) {
25        $button.html('<i class="fa fa-circle"></i>');
26      } else {
27        $button.html('<i class="fa fa-circle-o"></i>');
28      }
29    });
30  };
31  slide(0);
32
33  // タイマー処理
34  var current = 0;
35  var timerId = -1;
36  var setTimer = function() {
37    if (timerId > 0) {
38      clearInterval(timerId);
39    }
40    timerId = setInterval(function() {
41      var index = current + 1
42      if (index >= $items.length) {
43        index = 0
44      }
45      slide(index);
46    }, durationMs);
47  };
48  setTimer();
49
50  // ナビボタンクリック時の操作
51  $buttons.on('click', function() {
52      var index = u(this).attr('data-target');
53      if (current == index) {
54        return;
55      }
56      slide(index);
57      setTimer();
58  });
59})(u);

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


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

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

おわりに

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

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

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


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

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

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

Amazonで詳細を見る

この記事の著者 Webrow (うぇぶろう)
Web アプリ開発、 Web 顧問 エンジニア、WordPress サポートいたします。