CSS Only Carousel With Sliding Descriptions

Preview:

Description:

Make use of HTML & CSS to create an elegant, customizable carousel with a sliding drawer that contains a custom description for each image.

How to use it:

1. Load the Font Awesome 5 for the navigation arrows (OPTIONAL).

<script src="https://kit.fontawesome.com/c82ab85d43.js" crossorigin="anonymous"></script>

2. Add images together with descriptions, navigation arrows and pagination dots to the carousel.

<section class="slider-wrapper">
  <input
    type="radio"
    name="slides"
    checked="checked"
    id="slide_1"
    hidden
    />
  <input type="radio" name="slides" id="slide_2" hidden />
  <input type="radio" name="slides" id="slide_3" hidden />
  <input type="radio" name="slides" id="slide_4" hidden />
  <input type="radio" name="slides" id="slide_5" hidden />
  <ul class="slider-slides">
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/16/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/24/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/26/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/28/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/34/1920/400"
          alt=""
          />
      </div>
    </li>
    <li class="slider-slide">
      <section class="slider-content">
        <h2 class="slider-title">Slide #6</h2>
        <p class="demo-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Quisquam expedita mollitia esse voluptatibus modi hic ex
          officiis veniam dolor minima accusantium accusamus laudantium
          iste, tempore fugit libero maxime iusto neque.
        </p>
        <a class="demo-btn" href="#!">Learn more</a>
      </section>
      <div class="slider-img-wrapper">
        <img
          class="slider-image"
          src="https://picsum.photos/id/32/1920/400"
          alt=""
          />
      </div>
    </li>
  </ul>
  <div class="slider-arrows">
    <label class="slider-arrow" for="slide_1"></label>
    <label class="slider-arrow" for="slide_2"></label>
    <label class="slider-arrow" for="slide_3"></label>
    <label class="slider-arrow" for="slide_4"></label>
    <label class="slider-arrow" for="slide_5"></label>
    <label class="slider-arrow -go-to-first" for="slide_1"></label>
    <label class="slider-arrow -go-to-last" for="slide_5"></label>
  </div>
  <div class="slider-nav">
    <label class="slider-nav-item" for="slide_1"></label>
    <label class="slider-nav-item" for="slide_2"></label>
    <label class="slider-nav-item" for="slide_3"></label>
    <label class="slider-nav-item" for="slide_4"></label>
    <label class="slider-nav-item" for="slide_5"></label>
  </div>
</section>

3. Customize the slider by overring default variables in the _variables.scss and compile the main.scss to CSS.

sass main.scss app.css

4. Import the app.css into your document and done.

<link href=”app.css” rel=”stylesheet” />

5. Or directly import the main.scss into your JS.

import "./main.scss";