Carrusel ligero de desvanecimiento cruzado con CSS puro-Galarie. CSS
| Autor: | upamanyudas |
|---|---|
| Views Total: | 2,633 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 28, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Galarie. CSS es una biblioteca de CSS ligera para generar un carrusel automático de fundido cruzado desde cualquier contenido HTML.
Funcionamiento
Cargue los archivos CSS requeridos en la sección Head de la Página Web.
<link rel="stylesheet" href="galarie.prefixed.css"> <link rel="stylesheet" href="galarie.theme.css">
Crea un carrusel básico que contenga 5 diapositivas HTML como sigue.
<div class="galarie autoplay items-5"> <div id="item-1" class="control-operator"></div> <div id="item-2" class="control-operator"></div> <div id="item-3" class="control-operator"></div> <div id="item-4" class="control-operator"></div> <div id="item-5" class="control-operator"></div> <figure class="item"> <h1>Item 1</h1> </figure> <figure class="item"> <h1>Item 2</h1> </figure> <figure class="item"> <h1>Item 3</h1> </figure> <figure class="item"> <h1>Item 4</h1> </figure> <figure class="item"> <h1>Item 5</h1> </figure> <div class="controls"> <a href="#item-1" class="control-button">•</a> <a href="#item-2" class="control-button">•</a> <a href="#item-3" class="control-button">•</a> <a href="#item-4" class="control-button">•</a> <a href="#item-5" class="control-button">•</a> </div> </div>
