【クロスフェード】フェードイン＆フェードアウトのスライドショー(切替ボタン画像内)

目的

フェードイン＆フェードアウトのスライドショーが欲しい。
画像内の中央下段に小さい丸いボタンを配置し、クリック(タップ)で飛べるようにしたい。
HTMLを修正するだけで画像を自由に増減させたい。

実行結果

解説

構文をブラウザに読み込ませる順番

<head>〜</head>内に書いたSwiperのCSSを読み込みます。
自サイトのHTMLを読み込みます。
SwiperのJavaScriptを読み込みます(下述のHTMLの12行目)。
自サイトのJavaScriptを読み込みます(下述のHTMLの13行目)。

1〜4の順番に読み込ませないと動かない可能性があります。PHPでファイルを外部化している場合などは順番がズレる可能性があるので、お気を付けください。
画像の切り替えボタンは画像内の下段中央に収めています。画像外の下段中央へ配置したプログラムもあります。

HEAD

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

スライドショーの実装には複雑な構文が必要ですが、Swiper(スワイパー)という外部サイトのプログラムを使う事で簡単に実装が出来ます。上記構文を<head>〜</head>内に置く事で、スライドショーを実装するためのSwiperのCSSを読み込みます。SwiperのJavaScriptは下述のHTMLの12行目にあります。

HTML

<div class="structure_7_3">
	<div class="swiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="https://picsum.photos/800/400?random=1" alt="画像1" /></div>
			<div class="swiper-slide"><img src="https://picsum.photos/800/400?random=2" alt="画像2" /></div>
			<div class="swiper-slide"><img src="https://picsum.photos/800/400?random=3" alt="画像3" /></div>
			<div class="swiper-slide"><img src="https://picsum.photos/800/400?random=4" alt="画像4" /></div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="structure/7-3.js"></script>

picsum.photosというサイトがランダムに選んだサンプル画像を表示してくれます。サンプル画像で使用感を確かめた後に、自サイトで表示するための画像を用意しましょう。
画像の縦横比は統一してください。統一しないと余白が出来ます。
上記構文では4枚の画像がスライドします。画像の追加･削除は<div class="swiper-slide">〜</div>を追加･削除するだけで簡単に出来ます。CSSやJavaScriptの編集は不要です。
最下部の2つのスクリプトタグは<div class="swiper">〜</div>以降の</body>内にあればどこに書いてもOKです。12行目はSwiperが提供するJavaScriptで、13行目は自サイトに置くJavaScriptです(後述)。
画像切替ボタンを削除する場合は9行目の<div class="swiper-pagination"></div>を削除してください。

CSS

.structure_7_3 {
	width: 94%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
}

.structure_7_3 .swiper {
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	overflow: hidden; 
	position: relative;
}

.structure_7_3 .swiper-slide {
	width: 100% !important;
}

.structure_7_3 .swiper-slide img {
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

.structure_7_3 .swiper-pagination {
	bottom: 2% !important;
}

.structure_7_3 .swiper-pagination-bullet {
	background: #000000 !important;
	width: 8px !important;
	height: 8px !important;
	opacity: 0.2;
	transition: width 0.3s ease, height 0.3s ease;
}

.structure_7_3 .swiper-pagination-bullet-active {
	background: #000000 !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 6px;
	opacity: 1;
	transition: width 0.3s ease;
}

先述のHEADにある、Swiperが提供するCSSだけでは補えないので自サイトのCSSに書く構文です。
.swiperから始まるクラス名は全てSwiper側が固定している名前で、変えると動かないため変更不可です。widthやmarginなど値の変更はOKです。
ボタンの上下位置は36行目で変えられます。
当サイトの場合はPCサイトで画像が横に大きく伸びてしまう不具合があったので、25行目で!importantと書いて不具合を解消しました。こう書く事でSwiper側の指定を無視して、自サイトの指定が優先されます。

JavaScript

window.addEventListener('load', () => {
	if (typeof Swiper !== 'undefined') {
		new Swiper('.swiper', {
			loop: true,
			speed: 2500,
			grabCursor: true,
			effect: 'fade',
			fadeEffect: {
				crossFade: true
			},
			autoplay: {
				delay: 2000,
				disableOnInteraction: false,
			},
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
		});
	}
});

クロスフェード(フェードイン＆フェードアウト)の速度は5行目で調整します。500なら0.5秒で、1000なら1秒です。
次の画像へ切り替わるまでの時間は12行目で調整します。2000なら次の画像へ切り替わるまで2秒かかります。2500なら2.5秒です。
先述のCSSで示した.swiper等のクラス名はSwiper側で固定化されており変更不可ですが、誤って任意のクラス名に変えた場合、サーバー等のキャッシュが影響して画像が横並びで停止してしまう不具合が起こる事があり、元のクラス名に戻しても不具合が続いたままの場合があります。その際はクラス名を元に戻し、スクリプトタグを<script src="structure/7-3.js?v=1"></script>と末尾に適当なクエリパラメーターを付けてください。ブラウザを更新すると、サーバー側が新しいファイルと認識して再読込をするので解消されるはずです。正常に動いたらクエリパラメーターを消して構いません。クエリパラメーターを消して再び不具合が起きたらスーパーリロードで解消されるはずです。

クロスフェード(切替ボタン画像内)

目的

実行結果

解説

HEAD

HTML

CSS

JavaScript