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">

<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>