スライドショーの簡単な実装方法 – R.P.BLOG

スライドショーの簡単な実装方法

2021/06/24

2021/06/24

今回はスライドショーを簡単に実装する方法を紹介します。
使う言語・ライブラリはHTML5, CSS3, JavaScript, jQuery, slickです。

<コード>

<!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>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/ress@3.0.0/dist/ress.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
</head>

<body>
    <div class="slide_area"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="script.js"></script>
</body>
const imgList = ['images/slide_image.jpg', 'images/slide_image02.jpg', 'images/slide_image03.jpg'];
const slideArea = document.querySelector('.slide_area');

class SlideItem {
    constructor() {
        this.item = document.createElement('div');
        this.item.classList.add('slide_item', 'slide_bg');
        slideArea.appendChild(this.item);
    };
    appendImage(bgc) {
        this.item.style.backgroundImage = `url(${bgc})`;
    };
};

for (let i = 0; i < imgList.length; i++) {
    const newItem = new SlideItem();
    newItem.appendImage(imgList[i]);
};

$('.slide_area').slick({
    fade: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 1000,
    cssEase: "linear",
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
});

<解説>

<HTML>

<link rel="stylesheet" href="https://unpkg.com/ress@3.0.0/dist/ress.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

一行目はリセットCSSのCDNを読み込んでいます(これは有っても無くてもどちらでも大丈夫です)。
二行目はjQueryのライブラリであるslickのCSSのCDNを読み込んでいます。
どちらもheadタグ内に記述してください。

<div class="slide_area"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"
    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="script.js"></script>

一行目のdivタグはスライドショーを行う場所です。
二行目はjQueryのCDNを読み込み、三行目でslickのCDNを読み込んでいます。
四行目では自身で記述するjsファイルの読み込みです。
いずれもbodyタグの最後の方に記述してください。

<JavaScript>

const imgList = ['images/slide_image.jpg', 'images/slide_image02.jpg', 'images/slide_image03.jpg'];
const slideArea = document.querySelector('.slide_area');

一行目はスライドショーで表示したい写真を配列に格納しています。好きな画像に変えてもらって大丈夫です。

class SlideItem {
    constructor() {
        this.item = document.createElement('div');
        this.item.classList.add('slide_item', 'slide_bg');
        slideArea.appendChild(this.item);
    };
    appendImage(bgc) {
        this.item.style.backgroundImage = `url(${bgc})`;
    };
};

これは’.slide_area’に入れる’.slide_item’のクラス宣言です。
三行目でdivタグを作る’item’を作成します。四行目で’item’に’slide_item’と’slide_bg’というクラスを付与します。
五行目で’.slide_area’に子要素’item’を付与します。

七行目以降は背景画像を設定するメソッド’appendImage’を定義します。このメソッドの引数は’bgc'(backgroundImageの略)に設定します。
八行目で’item’に背景画像’bgc’を指定します。

for (let i = 0; i < imgList.length; i++) {
    const newItem = new SlideItem();
    newItem.appendImage(imgList[i]);
};

このfor文は’imgList’の数(画像の数)回繰り返すようにしています。
二行目でクラス宣言’SlideItem’を変数’newItem’で実行。三行目でメソッド’appendImage’を実行し、背景画像を’imgList’のi番目に指定します(引数)。

<slick>

$('.slide_area').slick({
    fade: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 1000,
    cssEase: "linear",
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
});

一行目で’.slide_item’でslickを実行するようにします。二行目以降はslickの動作内容を記述することになります。

<動作内容の指定>

    fade: true,             // スライダーの切り替えをfadeinにするか
    autoplay: true,         // 自動再生を行うか
    autoplaySpeed: 3000,    // 自動再生のスライド切り替えの秒数(ミリ秒単位)
    speed: 1000,            // fadeinの秒数を指定(ミリ秒単位)
    cssEase: "linear",      // CSS3のアニメーションイージングを指定
    infinite: true,         // スライドをループさせるか
    slidesToShow: 1,        // 一度に表示するスライドは何枚か
    slidesToScroll: 1,      // 一回で動くスライドは何枚か
    arrows: false,          // スライドを切り替える矢印はいるか

今回はこのように指定しました。

今回はここまでです。最後まで読んでいただきありがとうございました。

この記事をシェアする

コメントは受け付けていません。

自己紹介

髙橋

WEBデザイン学科

HTMLとCSS、PHPを勉強中

カテゴリー

アーカイブ

© 2020 Takahashi