Slider contenido pequeño con JavaScript puro
| Autor: | ganlanyuan |
|---|---|
| Views Total: | 5,766 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 14, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un deslizador de contenido pequeño pero rico en características construido usando JavaScript puro y HTML/CSS.
Características
- Autoplay.
- Navegación y paginación.
- Bucle infinito como un carrusel.
- Diseño adaptable.
- Varios elementos en una diapositiva.
- Animaciones personalizadas.
- Navegación por teclado.
¿Cómo funciona?
Agregue Tiny-Slider. CSS y Tiny-Slider. js a sus páginas Web.
<link rel="stylesheet" href="assets/css/tiny-slider.css"> <script src="assets/js/tiny-slider.js"></script>
Agregue contenido HTML al control deslizante.
<div class="container"> <div class="slider"> <div> <p>Slide 1</p> </div> <div> <p>Slide 2</p> </div> <div> <p>Slide 3</p> </div> </div> </div>
Inicializar el control deslizante.
tns({container: '.container'}); Available customization options.
tns({
container: '.slider',
mode: 'carousel', // or 'gallery'
axis: 'horizontal', // or 'vertical'
items: 1,
gutter: 0,
edgePadding: 0,
fixedWidth: false,
slideBy: 1,
controls: true,
controlsText: ['prev', 'next'],
controlsContainer: false,
nav: true,
navContainer: false,
navAsThumbnails: false,
arrowKeys: false,
speed: 300,
autoplay: false,
autoplayTimeout: 5000,
autoplayDirection: 'forward',
autoplayText: ['start', 'stop'],
autoplayHoverPause: false,
autoplayButton: false,
autoplayButtonOutput: true,
autoplayResetOnVisibility: true,
loop: true,
rewind: false,
autoHeight: false,
responsive: false,
lazyload: false,
touch: true,
mouseDrag: false,
swipeAngle: 15,
nested: false,
freezable: true,
onInit: false
}); Registro de cambios
v2.9.0 (12/14/2018)
- actualizar las pruebas, corregir un problema de imagen LazyLoad, corregir un problema de transitionduration en IE
v2.8.8 (12/08/2018)
- usar navegación estática
- Fix getVisibleSlideRange ()
- corregir autoHeight en el borde
- fijar el número NAV
v2.8.7 (11/10/2018)
- Fix (API): correct. x ()/.XS () para funcionar correctamente; vertical: fijar el ancho de las diapositivas en algunos navegadores antiguos
v2.8.6 (09/08/2018)
- actualización isVisible ()
v2.8.5 (08/18/2018)
- Añadir etiqueta "artículo" como diapositiva
v2.8.4 (08/12/2018)
- vertical mode: fix an issue in initialization
v2.8.3 (08/04/2018)
- actualizar
v2.8.2 (07/21/2018)
- RM removeElementStyles. js, corrija algunos problemas relacionados con "Disable" en resizeTasks ()
v2.8.1 (07/14/2018)
- actualizar
v2.7.4 (07/08/2018)
- actualizar vertical slider classes
v2.7.3 (06/30/2018)
- Galería: corregir la superposición de la página al hacer clic en NAV, Fix getImageArray () y getMaxSlideHeight ()
- se soluciona un problema en navInit
v2.7.3 (06/24/2018)
- Galería: corregir la superposición de la página al hacer clic en NAV, Fix getImageArray () y getMaxSlideHeight ()
v2.7.2 (06/17/2018)
- actualizar has3D.js so that it can run in <head>
v2.7.1 (06/09/2018)
- modo Galería: evitar tocar/draging
v2.7.0 (06/02/2018)
- modo Galería: evitar tocar/draging
v2.6.0 (05/30/2018)
- actualizar touch variables
