Fullpage Image & Video Slideshow In JavaScript

Preview:

Description:

A responsive fullpage slideshow that supports both image and video.

Features:

• Arrow keys to back/forward
• Space key to toggle autoplay
• Image/video counter

How to use it:

1. Load the necessary JavaScript and CSS files in the document.

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

2. Create a slideshow container in the document.

<div id="slideshow-container"></div>

3. Initialize the slideshow, specify the images & videos to be loaded, and define the path to the media folder.

let slideshow = {
    container: '#slideshow-container',
    media: [
      "1.jpg", 
      "2.mp4", 
      "3.jpg",
      // ...
    ],
    folder: 'media/',
}

4. Determine whether or not to enable Autoplay.

let slideshow = {
    container: '#slideshow-container',
    media: [
      "1.jpg", 
      "2.mp4", 
      "3.jpg",
      // ...
    ],
    folder: 'media/',
    autoplay: 'yes'
}

5. Specify the autoplay interval. Default: 3000.

let slideshow = {
    container: '#slideshow-container',
    media: [
      "1.jpg", 
      "2.mp4", 
      "3.jpg",
      // ...
    ],
    folder: 'media/',
    speed: 2000
}