Presentación de diapositivas adaptable modal con vainilla JavaScript-vShowBox

Vista prévia

Descripción

vShowBox is a vanilla JavaScript plugin that helps you create and display your image slideshow in a responsive lightbox popup.

Funcionamiento

Descargue & Instale la biblioteca vShowBox.

# Yarn
$ yarn add vshowbox

# NPM
$ npm install vshowbox --save

Importe el vShowBox en el módulo.

// ES 6
import vShowBox from 'vshowbox';

// CommonJS:
const vShowBox = require('vshowbox');

Para los exploradores, incluya los siguientes archivos JavaScript y CSS en la página.

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

Inicialice el vShowbox.

const vshowbox = window.vShowBox.init();

Cree previsualizaciones de imágenes en la Página Web.

<section class="sb-previews">


<div class="sb-preview" style="background-image: url('1.jpeg')" title="Img 1"></div>

<div class="sb-preview" style="background-image: url('2.jpeg')" title="Img 2"></div>

<div class="sb-preview" style="background-image: url('3.jpeg')" title="Img 3"></div>

<div class="sb-preview" style="background-image: url('4.jpeg')" title="Img 4"></div>

<div class="sb-preview" style="background-image: url('5.jpeg')" title="Img 5"></div>

</section>

Crear la Presentación modal.

<section class="sb-modal">


<span class="sb-slide-count btn"></span>

<span class="sb-close btn">&times;</span>


<div class="sb-stage">



<div class="sb-caption"></div>



<span class="sb-prev btn">&#10094;</span>


<span class="sb-next btn">&#10095;</span>


</div>

</section>