カルーセルを使って複数画像をスライドさせる方法 #JavaScript

友人たちと開発している、時間の使い方を管理するサービス「 Owntime 」で使用したカルーセルの使い方をまとめました。

カルーセルを使うことで、ユーザーの目につきやすい箇所に複数の画像を表示することが出来ます。

今回は、jQueryのSlickを使用しました。Vue.jsやReact.js、Angularの方が、モダンであることは、承知していますが、手っ取り早く実装したかったので、オワコンと言われているjQueryを使いました。

(jQueryで書かれているコードたちをモダンなJavaScriptに 書き換えてくれる or 勉強のために書き換えてみたい って人は、連絡ください！！)

出来上がりイメージ↓

対象読者

プログラミング初学者の方
普段はバックエンドを触っているがフロントを触る必要がある方
オワコンと言われているjQueryからまだまだ離れられない方

簡単に実装してみる

まずは、jqueryとslickの準備をします。

sample.html

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick-theme.min.css">

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick.min.js"></script>
</head>

カルーセルを実装します。

sample.html

<body>
    <style>
        .signup-slider {
            padding-inline-start: 0px;
            margin: 25px
        }
    </style>

    <div>
        <ul class="slider signup-slider">
            <li>
                <img src="path/to/image1.png" width="100%" alt="画像1">
            </li>
            <li>
                <img src="path/to/image2.png" width="100%" alt="画像2">
            </li>
            <li>
                <img src="path/to/image3.png" width="100%" alt="画像3">
            </li>
            <li>
                <img src="path/to/image4.png" width="100%" alt="画像4">
            </li>
            <li>
                <img src="path/to/image5.png" width="100%" alt="画像5">
            </li>
            <li>
                <img src="path/to/image6.png" width="100%" alt="画像6">
            </li>
        </ul>
    </div>

    <script>
        $('.slider').slick({
            dots: true,
            centerMode: true,
            centerPadding: '5px',
            slidesToShow: 1,
            autoplay: true,
            autoplaySpeed: 1000,
            responsive: [
                {
                    breakpoint: 320,
                    settings: {
                        arrows: false,
                        centerMode: true,
                    }
                }
            ]
        });
    </script>
</body>

他のオプションについては、Slickの公式ページを参考にしてください。

おまけ

今回紹介したslickを、友人とOwntimeに実装しています。
毎日の時間の使い方を記録して、分析して、理想な時間の使い方に近づけるサポートをするサービスです。

ぜひ、一度使ってみてください！