Carrusel DIV responsive con CSS puro

Vista prévia

Descripción

Sólo otro CSS solo componente de carrusel que le permite deslizarse infinitamente a través de un grupo de elementos DIV utilizando transiciones y transformaciones CSS3.

Más características

• Flechas y puntos de navegación.
• Previsualización de diapositivas en directo al situar el cursor sobre los puntos de paginación.
• Basado en entradas de radio HTML.
• Diseño totalmente receptivo.

Funcionamiento

Cargue la hoja de estilos principal en la sección Head de la Página Web.

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

Agregue diapositivas y entradas de radio a la Página Web de la siguiente manera:

<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>