Slide Show

- ad -

HTML

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

動作の確認

CSSあり scriptあり別ページで開きます。

　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;
}

Slide Show

HTML

動作の確認

css

JavaScript