Presentación de imágenes básica con CSS puro

Vista prévia

Descripción

Una prueba de concepto para tener una presentación de imágenes HTML/CSS pura sin JavaScript. Utiliza la casilla de verificación para la diapositiva activa y el elemento Label para la navegación de flechas siguiente/anterior. La presentación de diapositivas también viene con un efecto de transición crossfade basado en CSS3.

Funcionamiento

Cargue la hoja de estilos principal en su página HTML.

<link rel="stylesheet" href="css/slideshow.css">

Agregue imágenes junto con la paginación de viñetas y las flechas de navegación en la proyección de diapositivas.

<div class="slideshow">


<input type="radio" name="slide" id="item-1" checked="checked" />

<div class="slideshow-item">


<img src="1.jpg" />


<label for="item-3" class="previous">Go to slide 3</label>


<label for="item-2" class="next">Go to slide 2</label>

</div>


<input type="radio" name="slide" id="item-2" />

<div class="slideshow-item">


<img src="2.jpg" />


<label for="item-1" class="previous">Go to slide 1</label>


<label for="item-3" class="next">Go to slide 3</label>

</div>


<input type="radio" name="slide" id="item-3" />

<div class="slideshow-item">


<img src="3.jpg" />


<label for="item-2" class="previous">Go to slide 2</label>


<label for="item-1" class="next">Go to slide 1</label>

</div>

</div>