Ybooh

CSS-only Carousel

This carousel is created with HTML and CSS only.

<section class="carousel" aria-label="Gallery">

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>
   

 <aside class="carousel__navigation">

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. <a href="#carousel__slide3" class="carousel__navigation-button">Go to slide 3</a>
4. <a href="#carousel__slide4" class="carousel__navigation-button">Go to slide 4</a>

 </aside>

</section>