Full-Screen Slideshow of Images and Videos In Pure JavaScript

full-screen-slide-show

Full-Screen Vanilla JS Slide Show for Videos and Photos is a responsive full-page slideshow that supports both photos and videos.

Preview and Quicklook on macOS are adorable, but their treatment of GIFs and QuickLook’s inability to duplicate videos bothered me, so I wrote this. You can see it in action in this YouTube video.

Features:

  • Displays any video or photo in a folder in the largest possible size without cropping
  • Mouse or keyboard navigation (left and right arrow backward and forward, space to switch between auto-advance)
  • The slideshow option displays a new picture every x second.
  • The slideshow waits for the photos and videos to load to be played before progressing
  • Stores the current position of the slideshow. The next time you upload the document, it starts where it left off the last time.

How to make use of it:

1. Load the required JavaScript and CSS files within the doc.

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

2. Create a slideshow container within the doc.

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

3. Initialize the slideshow, specify the photographs & movies to be loaded, and outline the trail to the media folder.

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

4. Determine whether or not or to not allow Autoplay.

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

5. Specify the autoplay interval.

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

Fullpage Image & Video Slideshow, Slide full screen slide show Plugin/Github, automatic image slider in html css, simple pure javascript image slider, full screen video slider, full screen image slider


See Demo And Download

Official Website(codepo8): Click Here

This superior jQuery/javascript plugin is developed by codepo8. For extra Advanced Usage, please go to the official website.

Share