Deslizador de página vertical estilo tarjeta en Vanilla JavaScript-SlideScroll
| Autor: | PonomareVlad |
|---|---|
| Views Total: | 286 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 11, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
SlideScroll es una biblioteca de JavaScript que se desliza a través de una colección de secciones de contenido en el desplazamiento de página, similar al deslizador de la tarjeta.
Funcionamiento
Descargue e importe el SlideScroll en el documento.
<!-- ES6+ Modules import --> <script type="module"> import SlideScroll from './index.mjs'; </script> <!-- CommonJS modules import (Emulation) for older browsers --> <script nomodule src="index.js"></script>
Agregue el atributo Data-Slider-viewport al cuerpo.
<body data-slider-viewport>
Cree secciones de página con los siguientes atributos de datos.
<section data-slide-wrapper> <div data-slide-content style="background-image: url(bg1.jpg)"> <div data-slide-caption-animation> <h1>Slide 1</h1> <p>Content 1</p> </div> </div> </section> <section data-slide-wrapper> <div data-slide-content style="background-image: url(bg2.jpg)"> <div data-slide-caption-animation> <h1>Slide 2</h1> <p>Content 2</p> </div> </div> </section> <section data-slide-wrapper> <div data-slide-content style="background-image: url(bg3.jpg)"> <div data-slide-caption-animation> <h1>Slide 3</h1> <p>Content 3</p> </div> </div> </section> ...
Inicializar la biblioteca y listo.
window.slideScroll = new SlideScroll({
debug: true, // debug mode
activeHook: slideNode => dataLayer.push({'event': 'foto_' + slideNode.order})
});
