コピペでできる！cssとhtmlのみで作るスライドショー

CSS HTML
 2018.01.30
 2018.03.22

cssとhtmlのみで作るスライドショーです。
javascriptやプラグインを使うほどじゃないときなどにパパッとできちゃうものばかりです。

browser:  65 11 20 10 

cssとhtmlのみで作るスライドショー

シンプルな画像スライド

ニャン易度 
<div class="cp_cssslider">
	<div class="cp_slidewrapper">
		<div class="cp_slide_item"><img src="img1.jpg"></div>
		<div class="cp_slide_item"><img src="img2.jpg"></div>
		<div class="cp_slide_item"><img src="img3.jpg"></div>
		<div class="cp_slide_item"><img src="img4.jpg"></div>
		<div class="cp_slide_item"><img src="img5.jpg"></div>
	</div>
</div>
.cp_cssslider {
	width: 300px;
	height: 200px;
	overflow: hidden;
	margin: 2em auto;
	border: 10px solid #ffffff;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
}
.cp_slide_item {
	width: 300px;
	height: 200px;
	float: left;
	position: relative;
}
.cp_slidewrapper {
	width: 500%;/* slideの枚数×100% */
	position: relative;
	left: 0;
	animation: slider 20s infinite ease;/* スピード */
}
@-webkit-keyframes slider {
	/* 100%を枚数で割った%に割り振る */
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	20% {
	-webkit-transform: translateX(-300px);
	transform: translateX(-300px);
	}
	40% {
	-webkit-transform: translateX(-600px);
	transform: translateX(-600px);
	}
	60% {
	-webkit-transform: translateX(-900px);
	transform: translateX(-900px);
	}
	80% {
	-webkit-transform: translateX(-1200px);
	transform: translateX(-1200px);
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
}
@keyframes slider {
	/* 100%を枚数で割った%に割り振る */
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	20% {
	-webkit-transform: translateX(-300px);
	transform: translateX(-300px);
	}
	40% {
	-webkit-transform: translateX(-600px);
	transform: translateX(-600px);
	}
	60% {
	-webkit-transform: translateX(-900px);
	transform: translateX(-900px);
	}
	80% {
	-webkit-transform: translateX(-1200px);
	transform: translateX(-1200px);
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
}

自動で縦に切り替わるスライド キャプション付き

ニャン易度

  • sample1

  • sample2

  • sample3

  • sample4

  • sample5

animation:cycle1 25s linear infinite;
サンプルは25sずつスライドが5枚切り替わるように設定しています
5枚の場合全部で100s
スライドの動き全体から100sを100%で割ってアニメーションを設定します。
1枚目の場合25s(25%)の時点で2枚目に切り替わるのでその時点で200px下に動き非表示にする
2枚目の場合25s(25%)の時点で表示され50s(50%)の時点で3枚目に切り替わるのでその時点で200px下に動き非表示にするというようになります。
枚数を変更する場合はこの計算を枚数に合わせて変更する必要があります。

ex)3枚表示の場合
全体の動きは25s×3枚で75s
75sを100%で割ってアニメーションを設定します。
よって1枚目のスライドの動きは下記のようになります。
0% { top:0px; opacity:1; z-index:1; }
30% { top:0px; opacity:1; z-index:1; }
33.34% { top:200px; opacity:0; z-index:0; }
66.67% { top:-200px; opacity:0; z-index:0; }
97% { top:-200px; opacity:1; z-index:0; }
100% { top:0px; opacity:1; z-index:1; }
30％までは表示、30%〜33.34%で切り替え、66.67%の時点で200px上に移動して次の表示に備えます。
これを2枚目3枚目も同様に設定します。

プログレスバーも同様に100%÷3枚で表示されるように計算しなおします。
例えば下記のように
0%, 33.34%, 66.67%, 100% { width:0%; opacity:0; z-index:2; }
4%, 37%, 70% { width:0%; opacity:0.3; z-index:2; }
28%, 61%, 95% { width:100%; opacity:0.3; z-index:2; }
30%, 63%, 97% { width:100%; opacity:0; z-index:2; }
アニメーションを使ってコントロールするのにはこの計算ができるようになることが大切です。
いろいろ試して作ってみましょう。 
<div class="cp_cssslider">
	<div class="mask">
	<ul>
	<li><a href="#"><img src="img1.jpg" /></a>
	<div class="tooltip"><h1>sample1</h1></div></li>

	<li><a href="#"><img src="img2.jpg" /></a>
	<div class="tooltip"><h1>sample2</h1></div></li>

	<li><a href="#"><img src="img3.jpg" /></a>
	<div class="tooltip"><h1>sample3</h1></div></li>

	<li><a href="#"><img src="img4.jpg" /></a>
	<div class="tooltip"><h1>sample4</h1></div></li>

	<li><a href="#"><img src="img5.jpg" /></a>
	<div class="tooltip"><h1>sample5</h1></div></li>
	</ul>
	</div>
	<div class="cp_progressbar"></div>
</div>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_cssslider {
	background:#cccccc;
	border: 10px solid #ffffff;
	box-shadow:1px 1px 5px rgba(0,0,0,0.7);
	height:200px;
	width:300px;
	margin:2em auto;
	overflow:visible;
	position:relative;
}
.cp_cssslider .mask {
	overflow:hidden;
	height:180px;/* ボーダー分を差し引く */
}
.cp_cssslider ul {
	margin:0;
	padding:0;
	position:relative;
}
/* tooltip */
.cp_cssslider .tooltip {
	background:rgba(0,0,0,0.7);
	width:200px;
	height:auto;
	position:relative;
	bottom:95px;
	left:-300px;
	-webkit-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
.cp_cssslider .tooltip h1 {
	color:#fff;
	padding:0 0 0 20px;
}
.cp_cssslider li:hover .tooltip{
	left:0px;
}
.cp_cssslider:hover li,
.cp_cssslider:hover .cp_progressbar {
	-webkit-animation-play-state:paused;
	animation-play-state:paused;
}
.cp_cssslider li {
	width:300px;
	height:200px;
	position:absolute;
	top:-200px;
	list-style:none;
}
.cp_cssslider li:nth-child(1){
	-webkit-animation:cycle1 25s linear infinite;
	animation:cycle1 25s linear infinite;
}
.cp_cssslider li:nth-child(2){
	-webkit-animation:cycle2 25s linear infinite;
	animation:cycle2 25s linear infinite;
}
.cp_cssslider li:nth-child(3){
	-webkit-animation:cycle3 25s linear infinite;
	animation:cycle3 25s linear infinite;
}
.cp_cssslider li:nth-child(4){
	-webkit-animation:cycle4 25s linear infinite;
	animation:cycle4 25s linear infinite;
}
.cp_cssslider li:nth-child(5){
	-webkit-animation:cycle5 25s linear infinite;
	animation:cycle5 25s linear infinite;
}
@keyframes cycle1 {
	0%  { top:0px; }
	4%  { top:0px; }
	16% { top:0px; opacity:1; z-index:0; }
	20% { top:200px; opacity:0; z-index:0; }
	21% { top:-200px; opacity:0; z-index:-1; }
	50% { top:-200px; opacity:0; z-index:-1; }
	92% { top:-200px; opacity:0; z-index:0; }
	96% { top:-200px; opacity:0; }
	100%{ top:0px; opacity:1; }
}
@keyframes cycle2 {
	0%  { top:-200px; opacity:0; }
	16% { top:-200px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; }
	36% { top:0px; opacity:1; z-index:0; }
	40% { top:200px; opacity:0; z-index:0; }
	41% { top:-200px; opacity:0; z-index:-1; }
	100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle3 {
	0%  { top:-200px; opacity:0; }
	36% { top:-200px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; }
	56% { top:0px; opacity:1; z-index:0; }
	60% { top:200px; opacity:0; z-index:0; }
	61% { top:-200px; opacity:0; z-index:-1; }
	100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle4 {
	0%  { top:-200px; opacity:0; }
	56% { top:-200px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:200px; opacity:0; z-index:0; }
	81% { top:-200px; opacity:0; z-index:-1; }
	100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle5 {
	0%  { top:-200px; opacity:0; }
	76% { top:-200px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:200px; opacity:0; z-index:0; }
}
/* progressbar */
.cp_progressbar {
	position:relative;
	top:-5px;
	width:680px;
	height:5px;
	background:#000000;
	-webkit-animation:progressbar 25s ease-out infinite;
	animation:progressbar 25s ease-out infinite;
}
/* animation */
@keyframes progressbar {
	0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; z-index:2; }
	4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; z-index:2; }
	16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.3; z-index:2; }
	18%, 38%, 58%, 78%, 98% { width:100%; opacity:0;  z-index:2; }
}

サムネイルをクリックしたら切り替わるスライド

ニャン易度 
<div class="cp_cssslider">
	<input type="radio" name="cp_switch" id="photo1" checked/>
	<label for="photo1"><img src="img1.jpg" /></label>
	<img src="img1.jpg" />
	<input type="radio" name="cp_switch" id="photo2"/>
	<label for="photo2"><img src="img2.jpg" /></label>
	<img src="img2.jpg" />
	<input type="radio" name="cp_switch" id="photo3"/>
	<label for="photo3"><img src="img3.jpg" /></label>
	<img src="img3.jpg" />
	<input type="radio" name="cp_switch" id="photo4"/>
	<label for="photo4"><img src="img4.jpg" /></label>
	<img src="img4.jpg" />
	<input type="radio" name="cp_switch" id="photo5"/>
	<label for="photo5"><img src="img5.jpg" /></label>
	<img src="img5.jpg" />
</div>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_cssslider {
	width: 300px;
	padding-top: 200px; /* 画像の高さ */
	position: relative;
	margin: 2em auto;
	text-align: center;
}
.cp_cssslider > img {
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}
.cp_cssslider input[name='cp_switch'] {
	display: none;
}
/* サムネイル */
.cp_cssslider label {
	margin: 15px 5px 0 5px;
	border: 2px solid #ffffff;
	display: inline-block;
	cursor: pointer;
	transition: all 0.5s ease;
	opacity: 0.6;
	border-radius: 3px;
}
.cp_cssslider label:hover {
	opacity: 0.9;
}
.cp_cssslider label img {
	display: block;
	width: 40px;
	border-radius: 2px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
	border: 2px solid #FF7043;
	opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
	opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
	opacity: 1;
}

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？