A jQuery plugin for easy creation of responsive lightbox-style
media galleries and carousels. Features:
- Groups together your media in a lightbox-style gallery or carousel.
- Autorotating carousels.
- Carousel pager support.
- CSS transitions.
- Basic UI included.
- Lazyloads images and video through lazysizes.js.
See below for basic setup and examples.
Download from GitHub, or install from npm or bower:
You will find everything you need in the folder
- Add slidebox.css to the header of your html.
- Load jQuery in your page, preferably in the footer to optimize load times.
- On the next line load slidebox-min.js or slidebox-lazy-min.js.
- Create a gallery by wrapping your images in an element
slide-box. See the examples below, and the source of this page.
Example 1: Image Grid with Zoom
You can nest images one element deep. The parent element needs to have a class of
slide. For instance:
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
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
Create a carousel that loops by itself by setting two data attributes:
- Time between slide transitions in ms.
Example 3: Lazy Loading
slideBox.js can lazyload images through the lazysizes.js plugin.
To make this work:
- Load the lazy version of the plugin: slidebox-lazy-min.js.
- Add the CSS class
lazyloadto your slide element.
- Move your image source to a data attribute called
Created by Carst vd Molen