Carrusel horizontal desplazable en Vanilla JavaScript-portfolio. js
| Autor: | abhiomkar |
|---|---|
| Views Total: | 1,103 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 25, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Portfolio. js es una biblioteca de JavaScript Vanilla para crear una respuesta, horizontal, desplazable imagen por secuencia que tiene la capacidad de Lazy Load imágenes en de desplazamiento.
Funcionamiento
Instale el portfolio. js.
# NPM $ npm install portfolio-js --save
O incluya el siguiente JavaScript y StyleSheet en la Página Web.
<link rel="stylesheet" href="portfolio.css"> <script src="portfolio.umd.js"></script>
Añade tantas imágenes junto con descripciones al carrusel. Tenga en cuenta que debe incrustar las imágenes utilizando el atributo Data-src para la funcionalidad de carga diferida.
<div class="pf-carousel my-image-gallery"> <div class="pf-slider"> <div class="pf-item"> <img class="pf-item-image" data-src="1.jpg" /> <div class="pf-item-description"> Description 1 </div> </div> <div class="pf-item"> <img class="pf-item-image" data-src="2.jpg" /> <div class="pf-item-description"> Description 2 </div> </div> <div class="pf-item"> <img class="pf-item-image" data-src="3.jpg" /> <div class="pf-item-description"> Description 3 </div> </div> ... </div> </div>
Inicialice el Portfolie. js y listo.
new Portfolio(document.querySelector('.my-image-gallery'));
