Control deslizante de imagen adaptable/proyección de diapositivas con efecto parallax

Vista prévia

Descripción

Un plugin de JavaScript Pure Vanilla para generar un deslizador/presentación de imagen adaptable de una matriz de imágenes que usted proporciona.

Utiliza las propiedades de transformación y opacidad de CSS para crear efectos Parallax y crossfading al realizar la transición entre imágenes.

La librería trabaja con imágenes con diferentes alturas y anchos. Esto significa que la biblioteca se redimensionará automáticamente, recortar, centrar la imagen para ajustarse al contenedor principal.

Funcionamiento

Cargue los archivos JavaScript y CSS de la presentación de diapositivas de Vanilla JavaScript en el documento.

<link rel="stylesheet" href="./styles.css">
<script src="./slideshow.js"></script>

La presentación de diapositivas requiere Font awesome icónico Font para los iconos de navegación/paginación.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

Cree un elemento contenedor en el que desee colocar la proyección de diapositivas generada.

<div class="slideshow"></div>

Defina una matriz de imágenes para mostrar en la proyección de diapositivas.

const images = [

`https://picsum.photos/1200/800/?random`,

`https://picsum.photos/1200/600/?random`,

`https://picsum.photos/1800/710/?random`,

`https://picsum.photos/1200/710/?random`,

`https://picsum.photos/1200/700/?random`,

`https://picsum.photos/1300/800/?random`,

`https://picsum.photos/1200/670/?random`,
];

Inicialice la proyección de diapositivas y listo.

document.addEventListener("DOMContentLoaded", () => {

const slideShowElement = document.querySelector('.slideshow');

/**

 * SlideShow

 * @param {node} html element

 * @param {array} urls

 */

SlideShow(slideShowElement, images);
});

Registro de cambios

11/19/2018

• velocidad de transición actualizada