Touch-Enabled Pure JavaScript Carousel
| Autor: | vadimshymko |
|---|---|
| Views Total: | 5,512 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 14, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Un carrusel de JavaScript básico, móvil y amigable que te permite deslizarte infinitamente a través de un grupo de elementos HTML con soporte de deslizamiento táctil.
Funcionamiento
Cargue la hoja de estilos y JavaScript necesarios en la Página Web.
<link href="css/pure-js-carousel.css" rel="stylesheet"> <script src="js/pure-js-carousel.js"></script>
Agrega un grupo de elementos HTML para el carrusel.
<div class="carousel"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> <div>Slide 5</div> <div>Slide 6</div> <div>Slide 7</div> <div>Slide 8</div> <div>Slide 9</div> </div>
Inicialice el carrusel.
pureJSCarousel({
container: '.carousel',
infinite : true
}); Todas las opciones predeterminadas.
// CSS selectors
item: 'div'
nextBtn: document.createElement('button')
prevBtn: document.createElement('button')
// inifinite loop
infinite: false
// scroll one by one
scrollingOneByOne: false
// animation speed
speed: 500
// animation effect
effect: 'ease'
// delay time
delay: 0
// callbacks
onInit: false
onResize: false
