Skip to main content

スライドショー ②

目標#

ライブラリを使って、簡単なスライドショーを作成しよう！

サンプルコード#

今回は、Keen Slider というライブラリを使います。 ( ライブラリ、とは「便利なプログラムをみんなが使いやすいようにまとめたもの」です。)

1.Glitchの index.html を開いて、<head></head> の中に コードを追加しよう！#

<link rel="stylesheet" href="./style.css" /> の下の行に追加するよ

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"/>

2.CSSのコードは、Keen Slider があらかじめ持っているので今回は書きません！#

3.JavaScriptのコードを、**index.htmlの </body>のすぐ上に追加しよう！#

<script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js"></script><script>    let sliderElement = document.getElementById("my-keen-slider")    let interval = 0    function autoplay(run) {        clearInterval(interval)        interval = setInterval(() => {            if (run && slider) {                slider.next()            }        }, 2000)    }
    let slider = new KeenSlider(sliderElement, {        loop: true,        duration: 1200,        // 最初に自動再生をONにする        created: () => {            autoplay(true)        },    })</script>

4.次の画像に変わる時間を調整しよう！#

3.のコードの中で、2000と書かれている部分は、「2000ミリ秒後に次の画像にいく」という意味です。(2000ミリ秒 = 2秒)

この数字を変えて、自分の好きなタイミングで画像が変わるように変更しよう！