Slider
Swiper Chrome
Composition that pairs a text group with Swiper-chrome controls (navigation, scrollbar, action buttons).
Overview
SwiperChrome is the composition that pairs a text group (caption, heading, subline, plus text size and alignment) with Swiper-chrome controls: navigation position, scrollbar and navigation toggles, and action buttons. It renders its own CommonSwiper internally, so slides go directly into the default slot and the Swiper config is passed via the swiper-config prop.
Key Business & UX Benefits
- Gives every slider an editorial header, lifting the perceived quality of content rows from "carousel" to "curated".
- Configurable navigation position and toggles let designers tune the chrome per section without writing per-slider code.
- Caption, heading, and subline pair with action buttons to drive readers from a rotation into a deeper landing page.
- One chrome composition wraps any
CommonSwiper, removing the drift that creeps in when each slider styles its own header.
Usage
SwiperChrome Default
<SwiperChrome
caption="Featured"
heading="New arrivals"
subline="Just in this week"
navigation-position="top"
:show-scrollbar="true"
:swiper-config="swiperConfig"
>
<!-- slides go directly here -->
</SwiperChrome>
Feature List
- Pairs a text group (caption, heading, subline, plus size and alignment) with Swiper-chrome controls in one composition
- Configurable navigation position plus scrollbar and navigation toggles tune the chrome per section
- Action buttons inside the chrome drive readers from a rotation into a deeper landing page
- Renders its own CommonSwiper internally; slides go in the default slot and Swiper config flows through swiper-config
- Removes the drift that creeps in when each slider styles its own header
API Reference
| Prop | Default | Type |
|---|---|---|
caption | string | |
captionColor | string | |
heading | string | |
headingColor | string | |
headingTag | h2 | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" |
subline | string | |
sublineColor | string | |
textSize | m | "s" | "m" | "l" |
textAlign | left | "left" | "right" | "center"Only works when navigationPosition is 'bottom' |
navigationPosition | top | "top" | "bottom" |
swiperConfig | SwiperOptions { modules, injectStyles, injectStylesUrls, 111 more } | |
showScrollbar | false | booleanOnly shows when navigationPosition is 'bottom' |
showNavigation | true | boolean |
buttons | { text, link, variant, 1 more }[] |
| Slot | Type |
|---|---|
default | {} |