Press "Enter" to skip to content

A Responsive Pure CSS Content Slider With Controls

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:

  • Transitions fade away.
  • To switch between slides using the navigation arrows.
  • Jumps to a specific slide by clicking on pagination blocks.
  • Animated description bar.

How to make use of it:

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

Official Website(UmairAnis99): Click Here

This superior jQuery/javascript plugin is developed by UmairAnis99. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *