Slide Show（スライドショー）

　ここでいうSlide Showとは画像といったコンテンツを自動または手動で切り替える方法のことです。

　スライドショーは、クラウドに記録された写真の切り替えに使用したり、広告用のサイトでは商品やサービスの理解を深めてもらうために利用されることを見かけます。

　ここでは JavaScript と CSS による手動で切り替える簡単なスライドショーの作成例を解説します。

　自動で画像を切り替える方法はSlide Show（自動スライドショー）ページを参照してください。

　背景をスライドショー化することもできます。背景のスライドショーについてはSlide Showページを参照してください。

Example

　Slide Show（スライドショー）の作成例です。

　手動で切り替えるタイプのスライドショー（画像の切り替え）です。
　左右にある矢印<、>や最下段の○ボタンをクリックすることで画像を切り替えます。
　切り替わる際に徐々に全体が表示されようにしてあります。

動作の確認

CSSあり scriptあり上記のフレーム内に表示します。

HTML

　各画像は、番号、画像、キャプションテキストを img_box として包括しています。さらに next、pre 操作ボタン、各画像の表示ボタンと img_box を Slidesshow_images コンテナとして包括しています。

　class名の fade は fade in 表示にするものです。

CSS

　全体のコンテナパラメータposition: relative;にして、表示位置を自由になるようにしています。

* {box-sizing:border-box}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* images container */
.imgs_cntnr {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.imgs_cntnr .img_box {
  display: none;
}

/* Fading animation */
.imgs_cntnr .fade {
  animation-name: fade;
  animation-duration: 4s;
}

/* Caption or Text */
.imgs_cntnr .img_box .cptn_txt {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* next & previous buttons */
.imgs_cntnr .pre, .nxt {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.imgs_cntnr .nxt {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.imgs_cntnr .pre:hover, .nxt:hover {
  background-color: rgba(0,0,0,0.6);
}

/* The specify button/bullets/indicators */
.spcfy_bttn {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.8s ease;
}

.active, .spcfy_bttn:hover {
  background-color: #8c8b8b;
}