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

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

シンプルな画像スライド

ニャン易度

<div class="cp_cssslider01">
  <div class="cp_slidewrapper01">
    <div class="cp_slide01_item"><img src="img1.jpg"></div>
    <div class="cp_slide01_item"><img src="img2.jpg"></div>
    <div class="cp_slide01_item"><img src="img3.jpg"></div>
    <div class="cp_slide01_item"><img src="img4.jpg"></div>
    <div class="cp_slide01_item"><img src="img5.jpg"></div>
  </div>
</div>

/* slideの枠 */
.cp_cssslider01 {
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin: 1em auto;
  border: 10px solid #ffffff;
  box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
}
/* 画像のグループ */
.cp_slidewrapper01 {
  width: 500%;/* slideの枚数×100% */
  position: relative;
  display: flex;
  animation: cp_slider01 20s infinite ease;
}
/* 画像単体の設定 */
.cp_slide01_item {
  width: 300px;
  height: 200px;
}
@keyframes cp_slider01 {
  /* 100%を枚数で割った%に割り振る */
    0% { transform: translateX(0); }
   20% { transform: translateX(-300px); }
   40% { transform: translateX(-600px); }
   60% { transform: translateX(-900px); }
   80% { transform: translateX(-1200px); }
  100% { 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_cssslider04">
  <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>

.cp_cssslider04 {
  height:220px;/*枠分プラス（10px+10px）*/
  width:300px;
  margin:2em auto;
  overflow:visible;
  position:relative;
  background:#cccccc;
  border: 10px solid #ffffff;
  box-shadow:1px 1px 5px rgba(0,0,0,0.7);
}
.cp_cssslider04 .mask {
  overflow:hidden;
  height:200px;
}
.cp_cssslider04 ul {
  margin:0;
  padding:0;
  position:relative;
}
.cp_cssslider04 li {
  position:absolute;
  top:-200px;
  width:300px;
  height:200px;
  list-style:none;
}
.cp_cssslider04 li:nth-child(1){
  animation:cycle1 25s linear infinite;
}
.cp_cssslider04 li:nth-child(2){
  animation:cycle2 25s linear infinite;
}
.cp_cssslider04 li:nth-child(3){
  animation:cycle3 25s linear infinite;
}
.cp_cssslider04 li:nth-child(4){
  animation:cycle4 25s linear infinite;
}
.cp_cssslider04 li:nth-child(5){
  animation:cycle5 25s linear infinite;
}
/* tooltip */
.cp_cssslider04 .tooltip {
  position:relative;
  bottom:95px;
  left:-300px;
  width:200px;
  height:auto;
  background:rgba(0,0,0,0.7);
  transition:all 0.3s ease-in-out;
}
.cp_cssslider04 .tooltip h1 {
  color:#fff;
  padding:0 0 0 20px;
}
.cp_cssslider04 li:hover .tooltip{
  left:0px;
}
.cp_cssslider04:hover li,
.cp_cssslider04:hover .cp_progressbar {
  animation-play-state:paused;
}
/* PROGRESS BAR */
.cp_progressbar {
  position:relative;
  top:-5px;
  width:680px;
  height:5px;
  background:#000000;
  animation:progressbar 25s ease-out infinite;
}
/* ANIMATION */
@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; }
}
/* ANIMATION BAR */
@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_cssslider02">
  <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>

.cp_cssslider02 {
  width: 300px;
  padding-top: 200px; /* 画像の高さ */
  position: relative;
  margin: 2em auto;
  text-align: center;
}
.cp_cssslider02 > 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_cssslider02 input[name='cp_switch'] {
  display: none;
}
/* サムネイル */
.cp_cssslider02 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;
  padding: 0;
}
.cp_cssslider02 label:hover {
  opacity: 0.9;
}
.cp_cssslider02 label img {
  display: block;
  width: 40px;
  border-radius: 2px;
}
.cp_cssslider02 input[name='cp_switch']:checked + label {
  border: 2px solid #FF7043;
  opacity: 1;
}
.cp_cssslider02 input[name='cp_switch'] ~ img {
  opacity: 0;
}
.cp_cssslider02 input[name='cp_switch']:checked + label + img {
  opacity: 1;
}

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

シンプルな画像スライド

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

sample1

sample2

sample3

sample4

sample5

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

copypet.jp

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

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