JavaScriptの画像スライダーで横移動させるプログラム解説【slick.js】

2020年5月4日プログラムJavaScript,プログラムサンプル

【初心者】JavaScriptのslick.jsで画像スライド(カルーセル)するプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptのslick.jsで画像スライド(カルーセル)するプログラミングを解説【プログラミング初心者の入門講座】

slick.jsを使って画像を横移動させるスライドショーのプログラミングを解説です。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細:プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

slick.jsで画像スライダーで横移動させるプログラム解説

slick.jsを使って画像を横移動させるスライドショーのプログラミングを解説します。

slick.jsとは

slick.jsは、JavaScriptのライブラリです。slick.jsを使うと簡単に画像スライドをプログラミング出来ます。
ダウンロード:http://kenwheeler.github.io/slick/

サンプルコード

では、さっそくslick.jsを使って画像を横移動させるスライドショーのサンプルコードから紹介します。
(基本的に画像パス以外はコピペで動くと思います。)

今回はslick.js以外にHTMLタグの追加などを簡単に行えるように「JQuery」を使っています。

<html>
<head>
    <meta charset="utf-8">
    <title>slick.js - Image Slider Sample</title>
    <link rel="stylesheet" href="/slick/slick.css">
    <link rel="stylesheet" href="/slick/slick-theme.css">
    <style>
        body {
            text-align: center;
        }
        .slider {
            margin: 0 auto 50px;
        }
        .slider img {
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>slick.js - Image Slider Sample</h1>
    <ul class="slider">
        <li><img src="/img/1.jpg" alt="imgae(1)"></li>
        <li><img src="/img/2.jpg" alt="imgae(2)"></li>
        <li><img src="/img/3.jpg" alt="imgae(3)"></li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/slick/slick.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.slider').slick({
                autoplay: true
            });
        });
    </script>
</body>
</html>

HTML部分の解説

slick.jsを使って画像を横移動させるスライドショーのサンプルコードのHTML部分から解説します。

細かく解説していきます!

文字コードを指定

HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。

<meta charset="utf-8">
metaタグでcharsetを指定する理由

metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。

slick.jsのCSSを読み込む

slick.jsのCSSを読み込みます。
ダウンロード先:http://kenwheeler.github.io/slick/

<link rel="stylesheet" href="/slick/slick.css">
<link rel="stylesheet" href="/slick/slick-theme.css">

画像リストを作成

ulタグで画像のリストを用意します。あとJavaScriptで画像スライダーを適用するためにclass名を"slider"としておきます。

<ul class="slider">
    <li><img src="/img/1.jpg" alt="imgae(1)"></li>
    <li><img src="/img/2.jpg" alt="imgae(2)"></li>
    <li><img src="/img/3.jpg" alt="imgae(3)"></li>
</ul>

※画像のパスは変更してください。

JQueryをCDNで読み込む

JavaScriptでHTMLタグの追加を簡単に行えるようにJQueryを読み込みます。JQueryをCDNで読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
CDNとは

Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。

slick.jsを読み込む

slick.jsを読み込みます。
ダウンロード先:http://kenwheeler.github.io/slick/

<script src="/slick/slick.min.js"></script>
slick.min.js

基本的にJavaScriptのライブラリは、***.min.jsが用意されています。これは改行などを減らしてファイルサイズを小さくしてあります。理由は通信速度を高めてWebページの表示速度を高める効果などがあります。

CSS部分の解説

slick.jsを使って画像を横移動させるスライドショーのサンプルコードのCSS部分から解説をします。

このスタイル調整しなくても画像スライドには影響ないです。

レイアウトを微調整します。

styleタグを用意してスタイルを定義

スタイルを記述するためにstyleタグを記述します。

<style>
・・・
</style>

見た目の微調整

テキストのセンタリングや画像の余白などを微調整します。

body {
    text-align: center;
}
.slider {
    margin: 0 auto 50px;
}
.slider img {
    width: 100%;
}

JavaScript部分の解説

slick.jsを使って画像を横移動させるスライドショーするサンプルコードのJavaScript部分から解説をします。

ここからが本番!といっても数行だけですが💦

slick.jsで画像スライドを定義

ulタグに指定したclass名の"slider"に対して、slick.jsを定義します。
(はい、たったの3行だけでOK)

$(document).ready(function () {
    $('.slider').slick({
        autoplay: true
    });
});

まとめ【slick.jsを使って画像スライダーで横移動させるプログラム解説】

今回はslick.jsを使って画像を横移動させるスライドショーするサンプルコードを解説しました。

ライブラリを使うとたったの3行で出来ちゃうんで便利です!

JavaScriptには、他にもたくさん便利なライブラリがあります。知っていると開発効率が断然アップします。いざという時は利用するのもアリです。
slick.js:http://kenwheeler.github.io/slick/

最後まで読んでもらいありがとうございます。

プログラミングスクール受講メリット

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

ユート
ユート

Webプログラマ兼ブロガー | プログラミング基礎知識を発信|Webプログラマ歴は10年以上|JavaScript,PHP.HTML | 「人生の時間は有限。悪いことをしている時間はない」
プロフィール

2020年5月4日プログラムJavaScript,プログラムサンプル

Posted by ユート