Image Slider

<div class="cssonly-slider">
  <input type="radio" name="cssonly-slider" id="slide-1" />
  <input type="radio" name="cssonly-slider" id="slide-2" />
  <input type="radio" name="cssonly-slider" id="slide-3" />
  <input type="radio" name="cssonly-slider" id="slide-4" />
  <div class="slides-wrapper">
    <div class="slides">
      <div class="slide">
        <img src="https://cssonly.vercel.app/img_Nature_View.jpg" />
      </div>
      <div class="slide">
        <img src="https://cssonly.vercel.app/img_Qinling_mountains.jpg" />
      </div>
      <div class="slide">
        <img src="https://cssonly.vercel.app/img_Krabi_beach_view.jpg" />
      </div>
      <div class="slide">
        <img src="https://cssonly.vercel.app/img_Eilat_night_hotels.jpg" />
      </div>
    </div>
  </div>
  <!-- Optional slider arrows -->
  <div class="prev-arrows">
    <label class="prev-arrow" for="slide-1"></label>
    <label class="prev-arrow" for="slide-2"></label>
    <label class="prev-arrow" for="slide-3"></label>
    <label class="prev-arrow" for="slide-4"></label>
  </div>
  <div class="next-arrows">
    <label class="next-arrow" for="slide-1"></label>
    <label class="next-arrow" for="slide-2"></label>
    <label class="next-arrow" for="slide-3"></label>
    <label class="next-arrow" for="slide-4"></label>
  </div>
  <!-- end -->
  <!-- Optional slider dots -->
  <div class="dots">
    <label for="slide-1"></label>
    <label for="slide-2"></label>
    <label for="slide-3"></label>
    <label for="slide-4"></label>
  </div>
  <!-- end -->
</div>