Responsive pure CSS content slider with controls and a fade-out effect based on HTML radio inputs for interactivity. In addition to not using symbols for arrows and navigation points.

pure css carousel slider, html slideshow, automatic slideshow css, text slideshow html, image slider html css

A fully-featured multi-loop (circular) responsive image slider written in plain HTML and pure CSS.

More Features:

1. Add slides to the slider carousel.

<div class="container">
  <div class="slider">
    <input type="radio" name="slideSelectors" id="sl1" class="selectors" checked>
    <div class="slide1 slides">
      <div class="content">
        <h1>Slide 1</h1>
        <h2>Title 1</h2>
        <p>Description 1</p>
        <button class="btns">Explore</button>
      </div>
      <label for="sl5" class="prev"></label>
      <label for="sl2" class="next"></label>
    </div>
    <input type="radio" name="slideSelectors" id="sl2" class="selectors">
    <div class="slide2 slides">
      <div class="content">
        <h1>Slide 2</h1>
        <h2>Title 2</h2>
        <p>Description 2</p>
        <button class="btns">Explore</button>
      </div>
      <label for="sl1" class="prev"></label>
      <label for="sl3" class="next"></label>
    </div>
    <input type="radio" name="slideSelectors" id="sl3" class="selectors">
    <div class="slide3 slides">
      <div class="content">
        <h1>Slide 3</h1>
        <h2>Title 3</h2>
        <p>Description 3</p>
        <button class="btns">Explore</button>
      </div>
      <label for="sl2" class="prev"></label>
      <label for="sl4" class="next"></label>
    </div>
    <input type="radio" name="slideSelectors" id="sl4" class="selectors">
    <div class="slide4 slides">
      <div class="content">
        <h1>Slide 4</h1>
        <h2>Title 4</h2>
        <p>Description 4</p>
        <button class="btns">Explore</button>
      </div>
      <label for="sl3" class="prev"></label>
      <label for="sl5" class="next"></label>
    </div>
    <input type="radio" name="slideSelectors" id="sl5" class="selectors">
    <div class="slide5 slides">
      <div class="content">
        <h1>Slide 5</h1>
        <h2>Title 5</h2>
        <p>Description 5</p>
        <button class="btns">Explore</button>
      </div>
      <label for="sl4" class="prev"></label>
      <label for="sl1" class="next"></label>
    </div>
    <div class="nav">
      <label for="sl1" class="dots dot1"></label>
      <label for="sl2" class="dots dot2"></label>
      <label for="sl3" class="dots dot3"></label>
      <label for="sl4" class="dots dot4"></label>
      <label for="sl5" class="dots dot5"></label>
    </div>
  </div>
</div>

2. Load the primary stylesheet style.min.css from the dist folder.

<link rel="stylesheet" href="dist/css/style.min.css" />

3. Override the default background photos.

body .container .slider .slide1 {
  background: center no-repeat url("https://source.unsplash.com/evDuzZd8Kc0/1920x1280");
  background-size: cover;
}

body .container .slider .slide2 {
  background: bottom no-repeat url("https://source.unsplash.com/x6WQ6o3hy4k/1920x1280");
  background-size: cover;
}

body .container .slider .slide3 {
  background: center no-repeat url("https://source.unsplash.com/FA2-paw4Noo/1920x1280");
  background-size: cover;
}

body .container .slider .slide4 {
  background: center no-repeat url("https://source.unsplash.com/FrsfOyVU5_8/1920x1280");
  background-size: cover;
}

body .container .slider .slide5 {
  background: bottom no-repeat url("https://source.unsplash.com/34mvN5nt1ls/1920x1280");
  background-size: cover;
}

Responsive Full-featured Carousel, Responsive CSS-Only Content Slider Plugin/Github

See Demo And Download