Responsive DIV Carousel With Pure CSS

Preview:

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>