Slider.css
Presentación HTML sin javascript
- ¿Por qué el mundo necesita otro complemento de presentación HTML?
- Necesito una diapositiva HTML ligera.
- CSS es lo suficientemente potente como para hacer diapositivas.
- ¡Es genial y divertido!
¿Por qué slider.css?
- Sin javascript.
- Ligero pero lo suficientemente potente.
Características
- Hacia adelante / hacia atrás
- Transiciones
- Barra de progreso (Chrome #enable-experimental-web-platform-features)
- Maximizar / Minimizar
- Número de página
- Diseño básico
¿Cómo empezar?
<link rel="stylesheet" href="http://nodejs.in/slider.css/slider.css" />
<div style="width: 640px;height: 400px;">
<!-- Maximize -->
<input id="slider-max" type="checkbox" checked/>
<article class="slider slider-indicator">
<a id="slider-default"></a>
<label for="slider-max" title="Maximize"></label>
<section id="slider-1" default>
<!-- layout -->
<div>
<h1>Slider.css</h1>
<p>HTML presentation without javascript.</p>
</div>
</section>
<div>
<!-- triggers -->
<a></a>
<a href="#slider-2"></a>
<!-- progressbar -->
<span></span>
</div>
<!-- start page -->
<div id="slider">
<a href="#slider-default" class="slider-start">PLAY</a>
</div>
<!-- progressbar container -->
<div class="slider-progress"></div>
</article>
</div>
