slizer.js is a lightweight JavaScript plugin to automatically scroll the background image of a container just like a carousel. Great for panoramic backgrounds.
Load the slizer.js script in the document.
<script src="Slizer.js"></script>
Add a background image to your container.
<div id="example"></div>
#example {
background-image: url("panorama.jpg");
}
Attach the Slizer to the background image. Done.
const object = document.getElementById("example");
const slized = new Slizer(object);
Set the direction of scrolling. Default: ‘h’ (horizontal).
const slized = new Slizer(object, {
Direction : 'v'
});
Set the speed of scrolling.
const slized = new Slizer(object, {
RoundInterval : 100,
PixelPerRound : 1
});
Decide whether or not to use default background styles. Default: false.
const slized = new Slizer(object, {
ApplyDefaultStyle : true
});
Author: mahmoudJordan
Source Code: https://github.com/mahmoudJordan/slizer.js
#javascript