slideBox.js

Example 1: Image Grid with Zoom

Close Previous Next

HTML structure:

You can nest images one element deep. The parent element needs to have a class of slide. For instance:

Provide additional CSS for layout. This example loads background images using a slideBox.js JavaScript function, and background-size: cover to create image blocks equal in size. Look at the CSS included on this page in /demo/demo.css.

Example 2: Carousel

Close Previous Next

1 2 3 4 5

Create a carousel by adding the class box-carousel to your container. Carousels have pager support built-in. If you want a pager, include it in HTML following the structure below.

As a starting point, the default slidebox.css provides a responsive width of 50% as a starting point, with an image ratio of 4/3. You can override this in your own CSS. For instance, if you need the carousel to have a fixed width.
The carousel above has been set to 100% of its parent by defining these styles:

Make sure to load your CSS after the included stylesheet.

Example 2A: Automatic Looping

1 2 3

Create a carousel that loops by itself by setting two data attributes:

data-loop

true or false.
[default: false]

data-interval

Time between slide transitions in ms.
[default: 5000ms]

Example 3: Lazy Loading

Close Previous Next

slideBox.js can lazyload images through the lazysizes.js plugin.
To make this work:

1. Load the lazy version of the plugin: slidebox-lazy-min.js.
2. Add the CSS class lazyload to your slide element.
3. Move your image source to a data attribute called data-src.