Control deslizante de comparación de imágenes accesible en Pure JS-BeerSlider

Vista prévia

Descripción

BeerSlider es un plugin de comparación de imágenes de JavaScript vainilla utilizado para comparar fotos antes/después con un deslizador accesible.

Los usuarios pueden mostrar las diferencias antes y después entre las imágenes con las teclas de flecha y los eventos de arrastrar/deslizar.

Totalmente adaptable y funciona perfectamente en dispositivos móviles, tabletas y equipos de sobremesa.

Funcionamiento

Instale & descargar.

# NPM
$ npm install beerslider --save

Incluya el código JavaScript y CSS de BeerSlider en la página.

<link rel="stylesheet" href="dist/BeerSlider.css">
<script src="dist/BeerSlider.js"></script>

Añadir imágenes antes/después a la Página Web.

<div id="slider" class="beer-slider" data-beer-label="before">

<img src="before.jpg" alt="">

<div class="beer-reveal" data-beer-label="after">


<img src="after.jpg" alt="">

</div>
</div>

Inicializar el deslizador de cerveza.

new BeerSlider(document.getElementById('slider'));

Opciones posibles para personalizar el deslizador de cerveza.

• destino – nombre del objeto de destino
• global – Target es el objeto global
• STAT – exportar como métodos estáticos de destino
• proto – exportar como métodos prototipo de objetivo
• real – método de prototipo real para la versión ' Pure '
• forzado – exportar incluso si la característica nativa está disponible
• enlazar – métodos de enlace al destino, necesarios para la versión ' Pure '
• envolver – los constructores de envoltura para prevenir la contaminación global, necesaria para la versión ' pura '
• no seguras – usar la asignación simple de propiedad en lugar de eliminar + defineProperty
• Sham – añadir una bandera a los polirellenos no completamente completos