纯css轮播图

html代码

<h3>Pure CSS carousels</h3>
<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>
<div class="carousel-container">
  <h2>slider</h2>
  <div class="carousel my-carousel carousel--translate">
    <input class="carousel__activator" type="radio" name="carousel" id="F" checked="checked"/>
    <input class="carousel__activator" type="radio" name="carousel" id="G"/>
    <input class="carousel__activator" type="radio" name="carousel" id="H"/>
    <input class="carousel__activator" type="radio" name="carousel" id="I"/>
    <input class="carousel__activator" type="radio" name="carousel" id="J"/>
    <div class="carousel__controls">
      <label class="carousel__con