Basic Pure CSS presentación/carrusel

Vista prévia

Descripción

CSS parranda es una presentación HTML/CSS pura que es animada sin usar JavaScript. Utiliza botones de radio y etiquetas para desencadenar la proyección de diapositivas.

Funcionamiento

Crea una lista de imágenes para el carrusel.

<ul>

<li class="slide1">


<img src="1.jpg">


<h2>Image 1</h2>

</li>

<li class="slide1">


<img src="2.jpeg">


<h2>Image 2</h2>

</li>

<li class="slide1">


<img src="3.jpg">


<h2>Image 3</h2>

</li>

...
</ul>

Cree entradas de radio y etiquetas que se utilizarán para alternar entre imágenes. Toda la estructura de marcado debe ser así:

<ul>

<input type="radio" name="slider" id="1" class="slider" checked>

<input type="radio" name="slider" id="2" class="slider">

<input type="radio" name="slider" id="3" class="slider">

<li class="slide1">


<img src="1.jpg">


<h2>Image 1</h2>

</li>

<li class="slide1">


<img src="2.jpeg">


<h2>Image 2</h2>

</li>

<li class="slide1">


<img src="3.jpg">


<h2>Image 3</h2>

</li>
</ul>

<div class="selector">

<label for="1"></label>

<label for="2"></label>

<label for="3"></label>
</div>

Los principales estilos CSS.

.slider:nth-of-type(1):checked ~ .slide1:nth-of-type(1),
.slider:nth-of-type(2):checked ~ .slide1:nth-of-type(2),
.slider:nth-of-type(3):checked ~ .slide1:nth-of-type(3),
.slider:nth-of-type(4):checked ~ .slide1:nth-of-type(4),
.slider:nth-of-type(5):checked ~ .slide1:nth-of-type(5),
.slider:nth-of-type(6):checked ~ .slide1:nth-of-type(6) {

display: inline-block;
}

input[type=radio] {

display: none;
}

ul { text-align: center; }

li {

border: 3px solid #333;

list-style: none;

display: none;
}

img {

width: 800px;

height: 600px;

position: relative;
}

h2 {

position: absolute;

top: 250px;

color: #fff;

padding: 20px;

background-color: #000;
}

p {

font-size: x-large;

padding-left: 15%;
}

label {

background: black;

padding: 10px;

border-radius: 50%;

display: inline-block;
}

.selector { text-align: center; }