Responsive DIV Carousel With Pure CSS

Category: CSS & CSS3 , Slider | March 27, 2016
Author: quanton81
Views Total: 4,482
Official Page: Go to website
Last Update: March 27, 2016
License: MIT

Preview:

Responsive DIV Carousel With Pure CSS

Description:

Just another CSS only carousel component which allows you to slide infinitely through a group of DIV elements using CSS3 transitions and transforms.

More features:

  • Arrows and dots navigation.
  • Live slide preview when you hover over the pagination dots.
  • Based on html radio inputs.
  • Fully responsive design.

How to use it:

Load the core stylesheet in the head section of the webpage.

<link rel="stylesheet" href="style.css">

Add slides and radio inputs to the webpage as follows:

<div class="q-slider">
  <input name="q-an-n" id="q-sl-0" type="radio" class="q-an sl">
  <input name="q-an-n" id="q-sl-1" type="radio" class="q-an sl">
  <input name="q-an-n" id="q-sl-2" type="radio" class="q-an sl">
  <input name="q-an-n" id="q-pl" type="radio" class="q-an" checked>
  <input name="q-an-n" id="q-pa-0" type="radio" class="q-an pa">
  <input name="q-an-n" id="q-pa-1" type="radio" class="q-an pa">
  <input name="q-an-n" id="q-pa-2" type="radio" class="q-an pa">
  <ul>
      <div>
          <img src="0.jpg" style="width: 100%;">
      </div>
      <li class="n-0 q-im">
          <img src="1.jpg" alt="1° Slider" title="First">
      </li>
      <li class="n-1 q-im">
          <img src="2.jpg" alt="2° Slider" title="Second">
      </li>
      <li class="n-2 q-im">
          <img src="3.jpg" alt="3° Slider" title="Third">
      </li>
  </ul>
  <div class="q-de">
      <label class="n-0">
          <span class="q-ti"><span class="q-wr">First</span></span>
          <br><span class="q-de"><span class="q-wr">1° Slider</span></span>
      </label>
      <label class="n-1">
          <span class="q-ti"><span class="q-wr">Second</span></span>
          <br><span class="q-de"><span class="q-wr">2° Slider</span></span>
      </label>
      <label class="n-2">
          <span class="q-ti"><span class="q-wr">Third</span></span>
          <br><span class="q-de"><span class="q-wr">3° Slider</span></span>
      </label>
  </div>
  <div class="q-arrp">
      <label class="n-0" for="q-sl-0"><span><i></i></span></label>
      <label class="n-1" for="q-sl-1"><span><i></i></span></label>
      <label class="n-2" for="q-sl-2"><span><i></i></span></label>
  </div>
  <div class="q-arrn">
      <label class="n-0" for="q-sl-0"><span><i></i></span></label>
      <label class="n-1" for="q-sl-1"><span><i></i></span></label>
      <label class="n-2" for="q-sl-2"><span><i></i></span></label>
  </div>
  <div class="q-bu">
      <label class="n-0" for="q-sl-0">
          <span class="q-po"></span>
          <span class="q-th"><img src="1.jpg" alt="First" title="First"></span>
      </label>
      <label class="n-1" for="q-sl-1">
          <span class="q-po"></span>
          <span class="q-th"><img src="2.jpg" alt="Second" title="Second"></span>
      </label>
      <label class="n-2" for="q-sl-2">
          <span class="q-po"></span>
          <span class="q-th"><img src="3.jpg" alt="Third" title="Third"></span>
      </label>
  </div>
  <div class="q-pl-pa">
      <label class="play1" for="q-pl">
          <span class="q-po"></span>
      </label>
      <label class="pause0" for="q-pa-0">
          <span class="q-po"></span>
      </label>
      <label class="pause1" for="q-pa-1">
          <span class="q-po"></span>
      </label>
      <label class="pause2" for="q-pa-2">
          <span class="q-po"></span>
      </label>
  </div>
  <div class="q-ge">
      <div>
          <img src="0.jpg" alt="Start" title="Start" class="q-fi-im">
          <img src="1.jpg" alt="First" title="First">
          <img src="2.jpg" alt="Second" title="Second">
          <img src="3.jpg" alt="Third" title="Third">
          <img src="4.jpg" alt="End" title="End" class="q-la-im">
      </div>
  </div>
</div>

You Might Be Interested In:


2 thoughts on “Responsive DIV Carousel With Pure CSS

  1. 112864

    Hi, what is the default image 0.jpg in the in the for?

    Also what does “an” in the input, “de”, “bu” stands for?

    Reply
  2. Agha Oweis

    Hi, I’ve tried to change the code for more slides but failed unfortunatels. Could you help me out?!

    Reply

Leave a Reply