Rotador de imagen automático con JavaScript puro-círculo
| Autor: | bcruddy |
|---|---|
| Views Total: | 2,588 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 20, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Cycle es un plugin de JavaScript libre de dependencias para el ciclismo a través de una lista de imágenes con un efecto crossfade.
Funcionamiento
Cargue la biblioteca JavaScript Circle. js Vanilla en su documento.
<script src="src/cycle.js"></script>
Inserte una lista de imágenes en el documento y pase las opciones a través de los atributos de datos * de HTML5.
<ul class="cycle" data-target="li" data-interval="2500" data-width="300" data-speed="1000"> <li class="active" ><img src="1.jpg"/></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> ... </ul>
Inicializar el rotador de imágenes.
var cycle = new Cycle('selector');
// or
new Cycle('selector'); Todas las opciones posibles con valores predeterminados.
var cycle = new Cycle('selector',{
autoRun: true,
pauseOnHover: true,
selector: '.cycle',
target: 'li',
interval: '2500',
width: '300',
speed: '1000',
captionPosition: 'bottom',
captionColor: '#333',
captionBgColor: 'rgba(255, 255, 255, 0.75)'
}); Registro de cambios
07/20/2018
- envolver en vida y minificar para Dist, actualice el ejemplo para usar la versión minimizada de la carpeta Dist
