スライドショーの簡単な実装方法
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, // スライドを切り替える矢印はいるか今回はこのように指定しました。
今回はここまでです。最後まで読んでいただきありがとうございました。
この記事をシェアする
コメントは受け付けていません。
