DESIGN

【スライドショー】画像を自動的に切り換える方法

画像の自動切り換え

今回のテーマは「画像の切り替え(スライドショー)」についてです。

近年のコーポレートサイトの傾向として、スライドショーを使っている企業が多いです。

例えば、以下のようなサイトがあります。

参考URL:https://japantaxi.co.jp/

このように、最近ではスライドショーを使っているサイトが多いため、このテクニックを習得しておくことはかなり効果的です。

本記事では、画像を切り替える方法と実際に書いたコードもご紹介していきます。ぜひ、参考にしてみてください。

画像を切り替える方法

画像を切り替える方法(スライドショー)はいくつかありますが、今回は3つご紹介していきます。

本記事では、紹介しませんが、スライドショーならば「Bootstrap」にもありますので、そちらを使ってもらうことも選択肢の1つです。

Javascript

まず画像を切り替える際の代表的な言語として、JavaScriptがあります。

使うコードとしては、setIntervalを使用します。

実際に書いたコードがこちら。

'use strict';

{
    var images = [
        'img/kyoto1.jpg',
        'img/kyoto2.jpg',
        'img/tokyo.jpg',
        'img/sakura.jpg',
    ]; 

    var firstImg = document.getElementById('firstImg');
    var currentNum = 0;

    firstImg.src = images[currentNum];

    var changeImage = function(){
        currentNum++;
        firstImg.src = images[currentNum];
        if(currentNum > images.length - 1){
            firstImg.src = images;
        }
    }
        setInterval(changeImage, 4000);
}

setIntervalは「繰り返し」がキーワードになります。そのため、上記のコードでは、取得いているimgを永遠に繰り返して表示するという意味になります。

Jquery

2つ目の方法として、jQueryがあります。jQueryはslick(ライブラリ)という便利なツールがあります。このツールを使用することで、上記で数行ほど書いていたコードが2,3行で終わります。

実際に書いたコードがこちらです。

$('.クラス名または#ID名').slick({
    autoplay: true, //自動再生
  });

上記ではつらつらと書いてましたが、このライブラリーを使うとたったの3行です。

本当に便利なので使ってみる価値はあります。もちろん、スライドショーの原理原則を知りたいという方は、あえてJavaScriptでやってみるのが良いと思います。

slickの導入方法

slickの導入方法以下の通りです。

slickのダウンロード方法は以下の3ステップです。

  1. slickをこちらからダウンロードして解凍
  2. slickフォルダをhtmlファイルと同じ階層に入れる
  3. htmlファイルで必要なslickファイルを読み込ませる

3番目の「htmlファイルで必要なファイル」は以下の通りです。

  1. slick/slick.css
  2. slick/slick-theme.css
  3. slick/slick.min.js

最後に、これらを読み込ませるコードがこちら。

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script> 

上記の3つのファイルに加えて、jQueryも読み込んでおいてください。

実際に作ったスライドショー

最後に、実際に作ったスライドショーを載せておきます。

本記事は以上となります。

スライドショーができるとWEBデザインの幅は広がってくるので、ぜひトライしてみてください!