Responsive Image Slider/Slideshow With Parallax Effect

Preview:

Description:

A pure vanilla JavaScript plugin to generate a responsive image slider/slideshow from an array of images you provide.

It uses CSS transform and opacity properties to create Parallax and Crossfading effects when transitioning between images.

The library works with images with varying heights and widths. It means that the library will automatically resize, crop, center the image to fit the parent container.

How to use it:

Load the Vanilla JavaScript Slideshow’s JavaScript and CSS files in the document.

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

The slideshow requires Font Awesome Iconic Font for the navigation/pagination icons.

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

Create a container element in which you want to place the generated slideshow.

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

Define an array of images to display in the slideshow.

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`,
];

Initialize the slideshow and done.

document.addEventListener("DOMContentLoaded", () => {
  const slideShowElement = document.querySelector('.slideshow');
  /**
   * SlideShow
   * @param {node} html element
   * @param {array} urls
   */
  SlideShow(slideShowElement, images);
});

Changelog:

11/19/2018

• updated speed of transition