Responsive Carousel Slider With No JS – Carousel.CSS

Preview:

Description:

A pure CSS slider library to display HTML content in a responsive horizontal carousel format without the overhead of a JS plugin.

How to use it:

1. Download and import the carousel.css stylesheet.

<link rel="stylesheet" href="./carousel.css">

2. Add slides and associated radio buttons to the carousel slider. That’s it.

<div class="carousel">
  <input type="radio" id="carousel-css-slide-1" name="carousel-css" value="slide-1" checked/>
  <input type="radio" id="carousel-css-slide-2" name="carousel-css" value="slide-2"/>
  <input type="radio" id="carousel-css-slide-3" name="carousel-css" value="slide-3"/>
  <!-- More Radio Buttons Here -->
  <label for="carousel-css-slide-1" data-value="slide-1"></label>
  <label for="carousel-css-slide-2" data-value="slide-2"></label>
  <label for="carousel-css-slide-3" data-value="slide-3"></label>
  <!-- More Lables Here -->
  <div class="carousel-wrapper">
    <div class="carousel-slide">
      Slide 1
    </div>
    <div class="carousel-slide">
      Slide 2
    </div>
    <div class="carousel-slide">
      Slide 3
    </div>
    <!-- More Slides Here -->
  </div>
</div>

Changelog:

09/04/2023

• Removed unnecessary code

09/03/2023

• Bugfix