Create Auto Moving Backgrounds In Pure JavaScript – slizer.js

Category: Javascript | August 9, 2020
Views Total:1,719 views
Official Page:Go to website
Last Update:August 9, 2020


Create Auto Moving Backgrounds In Pure JavaScript – slizer.js


slizer.js is a lightweight JavaScript plugin to automatically scroll the background image of a container just like a carousel. Great for panoramic backgrounds.

How to use it:

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.

  • backgroundRepeat: reapeat
  • backgroundAttachment: fixed
  • backgroundPosition: 0 0
const slized = new Slizer(object, {
      ApplyDefaultStyle : true



  • Updated

You Might Be Interested In:

Leave a Reply