Card slider
The card slider allows you to display several cards sequentially in a single row. This can reduce visual clutter while increasing user interaction and storytelling.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files l swiper-bundle.min.js l coc-card-item.js
Functional grouping: Containers
Demo
Configure: select the dropdowns below to display the variety of options that a card slider supports.
Heading text - lorem Ipsum
First ride is on us
Responsible Pet OwnershipThrough the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.
Code
Responsive preview
Usage best practices
For a different user experience, see card set and card set menu.
Consider using the card slider when:
- when there are too many cards to present in a single row
- to add visual interest and/or interaction to a page
Usage examples:
- links to related articles
- a handful of related video clips
Do
Limit the number of cards in a set to 10. Users may have a difficult experience if there are too many cards to scroll through.
Consider keeping the number of visible cards (row size) at 2-3 so they are easier to see on the page.
Display cards in order of importance or newness.
Don't
Do not hide high priority cards with scrolling.
Do not combine regular sized cards with the mini cards in a single slider.