環境構築からWEBアプリ開発・スマホアプリ開発まで。ときには動画制作やゲームも。

supilog
すぴろぐ

slick.jsでシンプルなスライダーを実装する方法(フェード)

slick.jsでシンプルなスライダーを実装する方法(フェード)

たまたまスライダーをリプレイスする案件があり、メモとして残しておきます。至ってシンプルなスライダーです。切り替えのアニメーションとしてはフェードを使っています。

ソースコード

ソースコードだけさくっと見たいよという方はこちらからどうぞ。

https://github.com/supilog/slick_fade

実装

slick.jsダウンロード

公式ページよりslick.jsをダウンロードし、プロジェクトに配置します。(※GitHubリポジトリ参照)

jQuery読み込み

jQueryは今回バージョン3.6を使用しています。CDNを利用しても問題ありません。今回はプロジェクト内にダウンロードしたものを配置しています。(※GitHubリポジトリ参照)

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slick.js fade</title>
    <link rel="stylesheet" type="text/css" href="./slick/slick.css">
    <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
    <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

    <style>
        body {
            margin: 0;
            text-align: center;
        }
        
        #slider {
            width: 50%;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <header>
        <h1>slick.js fade</h1>
    </header>
    <section>
        <div id="slider">
            <div class="img">
                <img src="./img/pic001.jpg">
            </div>
            <div class="img">
                <img src="./img/pic002.jpg">
            </div>
            <div class="img">
                <img src="./img/pic003.jpg">
            </div>
            <div class="img">
                <img src="./img/pic004.jpg">
            </div>
        </div>
    </section>
    <script type="text/javascript" src="./slick/slick.min.js"></script>
    <script type="text/javascript">
        $('#slider').slick({
            infinite: true,
            speed: 1000,
            fade: true,
            cssEase: 'linear',
            autoplay: true,
            autoplaySpeed: 3500,
            arrows: true,
            dots: true,
        });
    </script>
</body>

</html>
slick.jsを読み込む
  • 9-10行目 slick.css, slick-theme.cssを読み込んでいます
  • 46行目 slick.min.jsを読み込んでいます
jQuery読み込み
  • 11行目 jquery-3.6.0.min.jsを読み込んでいます
画像の配置
  • 30-45行目 画像を4枚配置しています。親のタグにIDを付けておきます。今回は「slider」という名前としました
スライダーを動作させる
  • 47-58行目 スライダーを動作させるオプションなどを指定しています。これを記述することでスライダーが動作します
# オプション
infinite : 無限ループするかどうか。デフォルト値はtrue。
speed : 切り替えアニメーションの速さ。デフォルト値は300。切り替え間隔の値はautoplaySpeed。
fade : 切り替えアニメーションをフェードにする。デフォルト値はfalse。
cssEase : アニメーションイージング。デフォルト値はease。
autoplay : 自動で切り替えを行う。デフォルト値はfalse。
autoplaySpeed : 自動切り替えの間隔。デフォルト値は3000。
arrows : 矢印を表示するかどうか。デフォルト値はtrue。
dots : ドットインジケーターを表示するかどうか。デフォルト値はfalse。

アプリ確認

動作させてみた結果がこちらです。

https://supilog.github.io/slick_fade/

こちらを利用して無事にリプレイスすることが出来ました。

【注意】「矢印のオプションをtrueにしたのに表示されてないやんけ!」という方がいらっしゃるかもしれません。ごめんなさい。表示されているのですが、背景が白のため見えていないだけです。そこに矢印はちゃんと居ますw

Special Thanks

■テスト用画像

  • 写真AC(https://www.photo-ac.com/)