CSSだけで作るきれいなカルーセルです。動きや表現の違いで4種類です。(1)は少し速めのフェードアウト、フェードインで切り替わります。(2)は右から左に進むスライダーです。(3)は(1)と同じ動きですが下側の5つの丸いインジケーターに画像のサムネイルが付きます。(4)は小さい画像が大きくなって表示されるエフェクトです。

 

CSSカルーセルのサンプル

サンプルのhtmlソース(サンプル(1)のみ)

<div class="carousel-container">
  <h2>(1)fade in/out</h2>
  <ul class="carousel my-carousel">
    <input class="carousel__activator" type="radio" id="A" name="activator" checked="checked"/>
    <input class="carousel__activator" type="radio" id="B" name="activator"/>
    <input class="carousel__activator" type="radio" id="C" name="activator"/>
    <input class="carousel__activator" type="radio" id="D" name="activator"/>
    <input class="carousel__activator" type="radio" id="E" name="activator"/>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="E"></label>
      <label class="carousel__control carousel__control--forward" for="B"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="A"></label>
      <label class="carousel__control carousel__control--forward" for="C"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="B"></label>
      <label class="carousel__control carousel__control--forward" for="D"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="C"></label>
      <label class="carousel__control carousel__control--forward" for="E"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="D"></label>
      <label class="carousel__control carousel__control--forward" for="A"></label>
    </div>
    <li class="carousel__slide">
      <h1>A</h1>
    </li>
    <li class="carousel__slide">
      <h1>B</h1>
    </li>
    <li class="carousel__slide">
      <h1>C</h1>
    </li>
    <li class="carousel__slide">
      <h1>D</h1>
    </li>
    <li class="carousel__slide">
      <h1>E</h1>
    </li>
    <div class="carousel__indicators">
      <label class="carousel__indicator" for="A"></label>
      <label class="carousel__indicator" for="B"></label>
      <label class="carousel__indicator" for="C"></label>
      <label class="carousel__indicator" for="D"></label>
      <label class="carousel__indicator" for="E"></label>
    </div>
  </ul>
</div>

 

 

引用と参考;https://codepen.io/jh3y/pen/WwVKLN
戻るボタン