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

2020年5月4日システムJavaScript,プログラムコード,プログラム入門

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

どうも、UT(@ut_1029)です。

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/

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

プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

UT
UTの日常
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年5月4日システムJavaScript,プログラムコード,プログラム入門

Posted by UT