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

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 Ownership

Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

First ride is on us

Responsible Pet Ownership

Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

First ride is on us

Responsible Pet Ownership

Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

First ride is on us

Responsible Pet Ownership

Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

First ride is on us

Responsible Pet Ownership

Through 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.