Slider foto móvil amigable en Pure JavaScript-Gallery. js
| Autor: | allenou |
|---|---|
| Views Total: | 1,162 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 8, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Gallery. js es un deslizador de fotos basado en JavaScript puro que permite al usuario deslizar a través de un grupo de imágenes como un carrusel.
Funcionamiento
Importa el de JavaScript Gallery. js y la hoja de estilos Gallery. CSS en el documento HTML.
<link rel="stylesheet" href="gallery.css"> <script src="gallery.js"></script>
Importe la biblioteca Hammer. js para el soporte de gestos táctiles.
<script src="/path/to/hammer.min.js"></script>
Agregue imágenes al control deslizante.
- Data-src: imagen original
- src: path para cargar el Spinner
<div class="gallery-container"> <div class="gallery-wrapper"> <div class="gallery-slide" data-index="0"> <img data-src="./images/1.JPG" src="./images/loading.gif" alt="" class="lazy"> </div> <div class="gallery-slide" data-index="1"> <img data-src="./images/2.JPG" src="./images/loading.gif" alt="" class="lazy"> </div> <div class="gallery-slide" data-index="2"> <img data-src="./images/3.jpg" src="./images/loading.gif" alt="" class="lazy"> </div> </div> <div class="gallery-pagination"></div> </div>
Cree una nueva instancia de Gallery para inicializar el control deslizante.
var gallery = new Gallery('.gallery-container', {
// options here
}) Todas las opciones de slider posibles.
var gallery = new Gallery('.gallery-container', {
// slide item
slide: '.gallery-slide',
// pagination container
pagination: '.gallery-pagination',
// is clickable
paginationClickable: false,
// zoom image on tap
zoom: false,
// auto resize
resize: true,
// infinite loop
loop: false,
// enable lazy load
lazyLoading: false,
// lazy loader container
lazy: '.lazy'
}) Registro de cambios
07/08/2018
- Soporte Base64
07/08/2018
- Solucionado bug en una sola imagen
07/06/2018
- JS & actualización de CSS
