Fullpage Image & Video Slideshow In JavaScript

Category: Javascript , Slideshow | March 23, 2021
Author: codepo8
Views Total: 75 views
Official Page: Go to website
Last Update: March 23, 2021
License: MIT

Preview:

Fullpage Image & Video Slideshow In JavaScript

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
}

You Might Be Interested In:


Leave a Reply