Manifest cabinet
Usage
To get up and running quickly, you need the following packages on your page.
<!-- At the top of the page --><!-- At the bottom of the page -->
You can use the provided CSS as a starting point and replace it with your own. It's less than ~100 lines.
Basic usage
To add to your page, you need the following structure as a minimum:
Full example
Here is a full example of the mark up with inline comments documenting places to customise.
<!-- The outermost container needs to be positioned relative --> <!-- In this container you can put your controls and position them relative to your your outer container. --> <!-- The .cabinet__total class gets populated with the total number of images --> Total images: <!-- These two "paddles" are positioned left and right of the image for navigation The functional piece is the attribute data-cabinet="prev". All actions have this data attribute. --> prev <!-- This is another example of a functional button that goes back to the start of the carousel. --> reset <!-- The cabinet container moves. The way the sliding works is to translate the cabinet container to the left or right depending on the selected image. The widths are calculated, so you there is no work to make these specific widths. Padding and styling can be added without breaking this positioning. It's advised to only put `.cabinet_item` in the container. --> <!-- The cabinet item is considered a "selectable" item in the slides --> <!-- Each item can contain anything in theory, images are the most likely candidate. This has been tested to work with deep zoom image viewers. --> <!-- Another "paddle" that controls the flow externally. --> next
Custom controls
To create your own buttons you simply attach the data-cabinet
attribute to any HTML element.
You can also use data-cabinet-on
to change the DOM event.
For example:
Reset
This will only work when double-clicking this anchor tag. There is no requirements for anything other than the data attributes for this to work.
List of events
next
- moves forwardprev
- moves backreset
- moves to first slidefullscreenToggle
- toggles pseudo-fullscreen mode.