Móvil-primer carrusel de imágenes con JavaScript-LzSwiper
| Autor: | lironzluf |
|---|---|
| Views Total: | 1,903 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 9, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
LzSwiper es un Swiper ligero, móvil-primero que crea un carrusel de imagen simple con soporte para reproducción automática, RTL, navegación personalizada y eventos de deslizamiento táctil.
Funcionamiento
Cargue el de lzswiper. js de LzSwiper y la hoja de estilos LzSwiper. CSS en el documento HTML.
<link rel="stylesheet" href="LzSwiper.css"> <script src="LzSwiper.js"></script>
La estructura básica de HTML para el Swiper.
<div class="swiper-container" id="slider"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="1.jpg"/> </div> <div class="swiper-slide"> <img src="2.jpg"/> </div> <div class="swiper-slide"> <img src="3.jpg"/> </div> </div> </div>
Inicialice el LzSwiper para generar un simple carrusel.
var sliderObjects = {
slider: document.getElementById('slider'), // the swiper container element
wrapper: document.getElementsByClassName('swiper-wrapper')[0], // the slides wrapping element
slides: document.getElementsByClassName('swiper-slide') // all the slide elements
};
var Swiper = new LzSwiper(sliderObjects); Opciones de personalización predeterminadas que se pueden pasar como el segundo parámetro al método LzSwiper.
var sliderObjects = {
slider: document.getElementById('slider'), // the swiper container element
wrapper: document.getElementsByClassName('swiper-wrapper')[0], // the slides wrapping element
slides: document.getElementsByClassName('swiper-slide') // all the slide elements
};
var params = {
callback: undefined,
rtl: false,
showButtons: false,
spacing: 0,
autoSlideIntervalMsec: 2000,
loop: false
};
var Swiper = new LzSwiper(sliderObjects,params); Método de API.
// Returns the number of slides. Swiper.getNumberOfSlides() // Returns the slide width. Swiper.getSlideWidth() // Returns the current slide's index. Swiper.getSlideIndex() // To be used with auto param. Starts the auto slide mode. Swiper.startAutoSlide() // Stops the auto slide mode. Swiper.stopAutoSlide()
