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

2020年5月4日システムJavaScript,プログラミング初心者

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

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

JavaScriptslick.jsを使って画像スライド(カルーセル)するプログラミングの解説です。

slick.jsとは

slick.jsは、JavaScriptのライブラリです。slick.jsを使うと画像スライド(カルーセル)を簡単にプログラミングすることが出来ます。

slick.jsは「http://kenwheeler.github.io/slick/」からダウンロードすることが出来ます。

JavaScriptのslick.jsで画像スライド

JavaScriptのslick.jsで画像スライドのサンプルコード

JavaScriptslick.js画像スライドするプログラミングのサンプルコードです。

<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>

JavaScriptのslick.jsで画像スライドを解説

JavaScriptslick.js画像スライドするプログラミングのサンプルコードを解説します。

HTML部分

文字コードを指定

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

<meta charset="utf-8">

Webページ文字化けする原因は、大体がmetaタグ文字コードを指定出来ていない事が多いです。

slick.jsのCSSを読み込む

slick.jsCSSを読み込みます。

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

画像リストを作成

ulタグで画像のリストを用意します。

<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で読み込む

JQueryCDNで読み込むようにしました。

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

Content Delivery Networkの略です。
簡単に言うと、リソース(CSSJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。
リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。

slick.jsを読み込む

slick.jsを読み込みます。

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

CSS部分

少しレイアウトを調整するスタイルを書きます。
(あっても無くても画像スライドには影響しないです)

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

JavaScript部分

JavaScript部分を解説します。

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

class名が"slider“のHTMLタグに対して、slick.jsを定義します。
(3行だけでOK)

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

まとめ

今回はJavaScriptslick.jsを使って画像スライド(カルーセル)を行うプログラミングを解説しました。

slick.jsは「http://kenwheeler.github.io/slick/」からダウンロードすることが出来ます。

JavaScriptはライブラリーがとても豊富にあります。今後も便利なライブラリーを使ったサンプルコードを解説していくのでぜひご覧ください。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年5月4日システムJavaScript,プログラミング初心者

Posted by UT