jQueryのスライダープラグイン(slick)の導入方法(プログラミング初心者向け) -

jQueryでスライドショーのプラグイン(slick)ってどうやって使うの？導入のやり方が分からない。

プログラミング初心者の方はこんな悩みを持っている方もいると思います。

なのでSlickの導入の方法を書いてみます。

僕もslickの導入をググりながらやってみましたが、プログラミングの超初心者なので導入までに時間がかかりました。

どこで悩んだのか、解決法など書いていきます。

簡単なので誰でもできますよ。

1 slickをダウンロードする
2 slickの導入
3 HTMLを書く
4 javascriptを書く
5 完成
6 どこで悩んだのか？
7 まとめ

slickをダウンロードする

まずはslickをダウンロードしましょう。

下記からダウンロードしてください。

slickダウンロード

１、get it nowをクリック

２、Download Nowをクリック

デスクトップでもいいですし、好きな場所にダウンロードしておいてください。

slickの導入

１、自分のパソコンにフォルダを作る

自分の好きな場所にフォルダを作ります。

今回はローカルディスクに「slick」のフォルダを作成しました。

２、slickフォルダの中にさらにフォルダを作る

slickフォルダの中にcss、img、jsのフォルダを作ります。

imgフォルダにはスライドさせたい画像を入れておいてください。

３、ダウンロードしたslickのファイルを解凍

解凍したファイルを開くとこのようになっていると思います。

slickを開きます。

４、fontsをコピーする(ダウンロードしたslickフォルダの中にあります)

ダウンロードしたファイルの中のfontsを作成したslickフォルダに入れます。

このようにします。

５、cssフォルダに4つのファイルをコピーします。

ajax-loader.gif
slick.css
slick.scss
slick-theme.css

の４つを作成したフォルダの中のcssフォルダに貼り付けます。

６、jsフォルダに１つのファイルをコピーします。

jsフォルダにslick.min.jsを貼り付けます。

slick.min.jsはダウンロードしたslickフォルダの中にあります。

HTMLを書く

HTMLは下記のように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/slick.css"/>
    <link rel="stylesheet" href="css/slick-theme.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <ul class="slider">
        <li><a href="#"><img src="img/###.jpg" alt="###"></a></li>
        <li><a href="#"><img src="img/###.jpg" alt="###"></a></li>
        <li><a href="#"><img src="img/###.jpg" alt="###"></a></li>
    </ul>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="js/slick.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

<img src="img/###.jpg" alt="###">はスライドさせたい好きな画像を指定してください。

内容は下記のとおりです。

僕の場合は犬の画像で勉強しました。

javascriptを書く

jsフォルダにmain.jsファイルを作ります。

下記のように書けばスライダーになります。

$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
});

autoplayspeed:5000,の5000は５秒でスライドが切り替わるという意味です。

4000にすれば４秒になります。

完成

このようになればOKです。

どこで悩んだのか？

スライドショーを実装したくてプラグインのslickを使おうと思い、使い方を検索しました。

slickのダウンロードしてください。
そしてコードはこう書けば実装できますよ。

こう書いてあるブログはたくさんあります。

ですが、ダウンロードしたファイルをどこに設置すればいいのか書かれている記事はありませんでした。

（探し方が甘いだけかもしれません、もしくはそのぐらいはプログラマーなら普通は分かるものなのかもしれません）

そのために僕は導入に苦戦しました。

youtubeを見てなんとか解決できましたが、あの動画がなければできなかったと思います。

プログラミングの超初心者はこんなことでも分からないのです。

なので挫折する人が多いのかもしれません。

まとめ

slickは導入方法がわかればだれでも使えるプラグインです。

僕の場合はプログラミングの初心者だったので導入までに苦戦しました。

この記事がだれかの役に立てば幸いです。