v1.2.6
Slider
<Slider> wraps Clover’s carousel so you can stream manifests from a collection or facet feed. It hydrates client-side, stays SSR-safe, and links each slide back to its work page.
<Slider iiifContent="https://api.dc.library.northwestern.edu/api/v2/collections/7ac5769f-a1d9-4227-a350-bf8bd8b1cddc?as=iiif" />Props
| Prop | Type | Required | Notes |
|---|---|---|---|
iiifContent | string | ✅ | IIIF Collection URL or Canopy facet JSON (/api/facet/...). |
height | string | CSS height for the viewport area. | |
options | object | Passed to Clover and merged with global defaults from sliderOptions.js. | |
className | string | Adds classes to the slider container. |
Examples
Facet feed
Point the slider at a generated facet feed to surface related manifests inline.
<Slider iiifContent="/api/facet/Subject/architecture.json" />Custom breakpoints
Override the defaults with your own options.breakpoints map. Use the exported rem() helper in sliderOptions.js so the client runtime can convert to pixels.
import {rem} from '@canopy-iiif/app/ui/iiif/sliderOptions'; const customOptions = { breakpoints: { 320: {slidesPerView: 1.5, spaceBetween: rem(0.75)}, 640: {slidesPerView: 3, spaceBetween: rem(1)}, 1024: {slidesPerView: 4, spaceBetween: rem(1.25)}, },}; <Slider iiifContent="https://api.dc.library.northwestern.edu/api/v2/collections/94536627-cfdf-413c-852b-0cb16d986da3?as=iiif" options={customOptions}/>Tall viewport
Use the height prop when a slider needs extra breathing room for taller thumbnails.
<Slider iiifContent="https://api.dc.library.northwestern.edu/api/v2/collections/7ac5769f-a1d9-4227-a350-bf8bd8b1cddc?as=iiif" height="28rem"/>