Responsive Slideshow Modal With Vanilla JavaScript – vShowBox

Preview:

Description:

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

How to use it:

Download & install the vShowBox library.

# Yarn
$ yarn add vshowbox
# NPM
$ npm install vshowbox --save

Import the vShowBox into your module.

// ES 6
import vShowBox from 'vshowbox';
// CommonJS:
const vShowBox = require('vshowbox');

For browsers, include the following JavaScript and CSS files on the page.

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

Initialize the vShowbox.

const vshowbox = window.vShowBox.init();

Create image previews on the web page.

<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>

Create the slideshow 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>