Ybooh

CSS-only Carousel

1.        <a href="#carousel__slide4"
             class="carousel__prev">Go to last slide</a>
          <a href="#carousel__slide2"
             class="carousel__next">Go to next slide</a>
   

2.      <a href="#carousel__slide1"
           class="carousel__prev">Go to previous slide</a>
        <a href="#carousel__slide3"
           class="carousel__next">Go to next slide</a>
   

3.      <a href="#carousel__slide2"
           class="carousel__prev">Go to previous slide</a>
        <a href="#carousel__slide4"
           class="carousel__next">Go to next slide</a>
   

4.      <a href="#carousel__slide3"
           class="carousel__prev">Go to previous slide</a>
        <a href="#carousel__slide1"
           class="carousel__next">Go to first slide</a>
   

1. <a href="#carousel__slide1" class="carousel__navigation-button">Go to slide 1</a>
2. <a href="#carousel__slide2" class="carousel__navigation-button">Go to slide 2</a>

3. Go to slide 3</a>

4. <a href="#carousel__slide4" class="carousel__navigation-button">Go to slide 4</a>

     <input type="radio" name="r" id="r1" checked>
     <input type="radio" name="r" id="r2">
     <input type="radio" name="r" id="r3">
     <input type="radio" name="r" id="r4">
     <input type="radio" name="r" id="r5">

       <img src="https://images.unsplash.com/photo-1547782793-e1444139967a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">

       <img src="https://images.unsplash.com/photo-1556115908-233c785befbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">

       <img src="https://images.unsplash.com/photo-1548438929-0b0e7342d732?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">

       <img src="https://images.unsplash.com/photo-1548431001-424da3e6328f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">

       <img src="https://images.unsplash.com/photo-1559597748-34913c8ba036?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">

<label for="r1" class="bar-arrow"></label>

       <label for="r2" class="bar-arrow"></label>
       <label for="r3" class="bar-arrow"></label>
       <label for="r4" class="bar-arrow"></label>
       <label for="r5" class="bar-arrow"></label>

       <label for="r1" class="bar"></label>
       <label for="r2" class="bar"></label>
       <label for="r3" class="bar"></label>
       <label for="r4" class="bar"></label>
       <label for="r5" class="bar"></label>