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.
To add to your page, you need the following structure as a minimum:
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 youryour 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 navigationThe 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 thestart of the carousel.-->reset<!-- The cabinet container moves. The way the sliding works is to translate thecabinet 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
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.
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 forward
prev- moves back
reset- moves to first slide
fullscreenToggle- toggles pseudo-fullscreen mode.