Run of the mill simple JS image slider module.
A simple single-file JavaScript image sliding gallery container without any dependencies.
Warning
You might needs secure HTTPS context/CORS functionality to load images.
- Simply include the file at a path relative to site/project root.
- Ensure image files are located at path relative to site/project root.
- On the JS side, identify & fetch the ImageFrame view holder.
- Instantiate ImageFrame object via connecting it with the view holder.
- Call the initialization method
ini(imagelist, transitionDelay)where:
imagelist: A list of strings representing the relative path to image files.transitionDelay: Time specifying how long each image should be shown before switching.- HTML (
app.htm)
<!DOCTYPE html>
<html lang="en">
<head>
<title>ImageFrame</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/imageframe.css"/>
</head>
<body>
<main>
<div id="imageframe-view"></div>
</main>
<script type="module" src="app.js"></script>
</body>
</html>
- JS (
app.js)
import { ImageFrame } from './imageframe.js'
window.addEventListener('load', () => {
const imageframeView = document.getElementById('imageframe-view'); // Get container view.
if(imageframeView === null) {
throw new Error('No ImageFrame container found');
}
window.imageframe = new ImageFrame(imageframeView); // Initialize ImageFrame & connect to view.
// List of image items to view.
const imagelist = [
'./image/img01.png',
'./image/img02.png',
'./image/img03.png',
'./image/img04.png',
'./image/img05.png',
];
// Load up...
window.imageframe.ini(imagelist, 3200); // 2nd arg = 0 to disable slideshow feature.
// window.imageframe.animateOn(); // Seems to not be necessary, but won't hurt in case of any 'complication'.
}, { once: true });
window.addEventListener('pageshow', () => {
window.imageframe.animateOn();
});
window.addEventListener('pagehide', () => {
window.imageframe.animateOff();
});