Deslizador automático de imagen adaptable en Vanilla JavaScript-Air-Slider
| Autor: | nueq22 |
|---|---|
| Views Total: | 3,704 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 25, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Air-Slider es un simple plugin de JavaScript puro para crear un deslizador/presentación de imágenes de desvanecimiento cruzado que ajusta automáticamente el tamaño de la imagen cuando cambia la ventana.
Funcionamiento
Agregue la hoja de estilos y los archivos JavaScript de Air-Slider a su página HTML.
<link rel="stylesheet" href="air-slider.min.css"> <script src="air-slider.min.js"></script>
Añada sus propias imágenes como diapositivas al deslizador.
<div class="air-slider"> <div class="slide"> <img src="1.jpg" alt="slide1"/> </div> <div class="slide"> <img src="2.jpeg" alt="slide2"/> </div> <div class="slide"> <img src="3.jpeg" alt="slide3"/> </div> </div>
Inicializa el deslizador de imagen creando un nuevo objeto airSlider como este:
var slider = new airSlider({
// options go here
}); Configuración del deslizador lo que quieras:
var slider = new airSlider({
// enable autoplay
autoPlay: true,
// autoplay interval
autoPlayTime: 3000,
// slider size
width: '600px',
height: '300px'
});
