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

 

サンプルのhtmlソース（サンプル（１）のみ）

<div class="carousel-container">
  <h2>（１）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>