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.
