Description
The carousel pattern allows for displaying more content in the same amount of screen estate by letting users click or swipe through through slices of content.
Documentation
Patterns builds on the slick library
Slick
(licensed under LGPL 3) to provide a very simple way to create
carousels. Just by adding a pat-carousel class to your markup you can
turn anything into a beautiful carousel.
Carousels usually use an unordered list to define all panels:
This is not required though: any element can be used as container and for panels. For example using a sequence of divs in a section:
This is panel 1
....
This is panel 2
....
There are no restrictions on the content that you use in a panels: you can use images, videos, or any other HTML content.
Any links in the page that point directly to a panel will cause the carousel to jump to the linked panel when clicked.
As you can see in the reports screenshot AcmeReports(TM) can generate beautiful reports.
Such links will automatically get a current class when the panel they
are pointing to is displayed.
Lazy loading
The carousel supports lazy loading. To use this simply give your images
a data-src attribute. When a panel is about to be displayed the
carousel will move all data-src attributes to src
- <img data-src="images/img1.jpg/>
- <img data-src="images/img2.jpg/>
Customizing behaviour
The default carousel is quite spartan. You can customize it through
options in the data-pat-carousel attribute.
| Property | Description | Default | Allowed Values | Type |
|---|---|---|---|---|
| auto-play | … | false | true, false | Boolean |
| auto-play-speed | … | 1000 | Integer | |
| slides-to-scroll | … | 1 | Integer | |
| slides-to-show | 3 | Integer | ||
| dots | … | show | show, hide | One of the allowed string values |
| speed | … | 500 | Integer | |
| height | Enables adaptive height for single slide horizontal carousels. | fixed | fixed, adaptive | One of the allowed string values |
| arrows | Prev/Next Arrows | show | show, hide | One of the allowed string values |
| append-dots | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object) | CSS selector | ||
| infinite | Infinite loop sliding | false | true, false | Boolean |