The Card Slider shows a horizontal row of cards you write yourself: an image, a title, a short description and an optional link. Use it for feature panels, calls to action or a set of highlights on a landing page.
Adding the block
- Edit the page under Admin > Sites > (site) > Pages > (page).
- In the Add new block sidebar, click BlockSuite: Card Slider.
- Fill in the block settings and add at least one card.
- Click Save.
A Card Slider with no cards renders nothing on the public page.
Block settings
| Field | Description |
|---|---|
| Heading | Optional heading shown above the slider as an <h2>. Also used as the slider's accessible name. |
| Cards visible | Number of cards visible at once on desktop, 1 to 6 (default 3). Tablets show at most 2 and phones show 1 regardless of this value. |
| Autoplay | Tick Auto-advance slides to move to the next card automatically. |
| Autoplay interval | Milliseconds between slides, shown only when autoplay is on. Default 4000; values below 1000 are raised to 1000 on save. |
Cards
Click Add card to add a card. Each card has:
| Field | Description |
|---|---|
| Title | Required. A card with an empty title is dropped when the page is saved. Rendered as an <h3>. |
| Description | Plain text, shown under the title. HTML is not interpreted. |
| Image | Click Select to choose an asset from the sidebar, or Clear to remove it. Cards without an image show only the text. The asset's alt text is used; if it has none, the card title is used instead. |
| Link URL | Optional. When set, a button link is rendered at the bottom of the card. |
| Link label | Text of the button. Defaults to Learn More when left empty. |
Use the up and down arrows in the corner of each card to reorder cards, and Remove card to delete one. Changes take effect when you save the page.
If an image asset is later deleted from Admin > Assets, the card keeps its text and renders without an image.
On the public site
- Cards are laid out in a flex track. The number of visible cards follows the viewport: 1 below 768px, up to 2 between 768px and 1023px, and the configured Cards visible from 1024px up.
- Previous and next arrow buttons appear when there is more than one card. The previous arrow is hidden at the start and the next arrow at the end.
- Visitors can also use the left and right arrow keys while the slider has focus, or swipe with touch or a mouse drag (a drag of more than 50px changes slide).
- With autoplay on, the slider advances every interval until it reaches the last position, then stops. Hovering over or focusing inside the slider pauses autoplay; leaving it restarts.
- A visually hidden live region announces "Slide X of Y" to screen readers on each change.
Theme authors can restyle the cards with the classes listed in Theming and Markup.