Slider

A UI component that renders an item carousel for the contents of a IIIF Collection using Embla Carousel (opens in a new tab).

Collection ↗

Note: Clover IIIF has discontinued use of Swiper (opens in a new tab) due to dependency security vulnerabilities and its impact on bundle size. We recommend upgrading to Clover IIIF 3.7.x or later, which now uses the lighter Embla Carousel (opens in a new tab) as a precaution.

Features

Provide a IIIF Presentation API (opens in a new tab) Collection and the component:

Renders a carousel style components
Renders label, summary for the referenced Collection
Transcribes homepage as a View All button referenced Collection
Renders items as a "slide" for each Manifest or Collection item
Renders label, summary for each item "slide"
Transcribes homepage as an <a> wrapping each item "slide"
Supports custom breakpoints to display customized slide counts
Supports callback onItemInteraction to override default "slide" behavior

Installation

  npm install @samvera/clover-iiif

Usage

React

Add the Slider component to your jsx or tsx code. The Slider uses Embla Carousel (opens in a new tab) and ships with the styles it needs, so no additional stylesheet imports are required.

import Slider from "@samvera/clover-iiif/slider";

Render the slider with IIIF Collection URI. The only required prop is the iiifContent, which is the URI of the IIIF Collection.

<Slider iiifContent="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif" />

API Reference

Viewer can configured through an options prop, which will serve as a object for common options.

Prop	Type	Required	Default
`iiifContent`	`string`	Yes
`collectionId` (deprecated)	`string`	No
`onItemInteraction`	`function`	No
`options.breakpoints`	`SliderBreakpoints`	No
`options.credentials`	`omit`, `same-origin`, `include`	No	`omit`
`options.customViewAll`	`string`	No

Custom Breakpoints

Slider ships with sensible default breakpoints. You may customize your own by passing in a breakpoints object, where each key is a min-width pixel value and each value sets slidesPerView, slidesPerGroup, and/or spaceBetween for widths at or above that breakpoint:

const MyCustomSlider = () => {
  const iiifContent =
    "https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif";
 
  const customBreakpoints = {
    320: {
      slidesPerView: 2,
      slidesPerGroup: 2,
      spaceBetween: 20,
    },
    480: {
      slidesPerView: 3,
      slidesPerGroup: 3,
      spaceBetween: 30,
    },
    640: {
      slidesPerView: 4,
      slidesPerGroup: 4,
      spaceBetween: 40,
    },
  };
 
  return (
    <Slider
      iiifContent={iiifContent}
      options={{
        breakpoints: customBreakpoints,
      }}
    />
  );
};

Custom Interactions

The default behavior for a click (or press) event on each of the individual items is to route to the href value set by the IIIF Presentation 3.0 API homepage[0].id for each item entry.

You can optionally set an event handler for the onItemInteraction value as a callback for a custom action. The full item object will be passed back to the consuming application.

const MyCustomSlider = () => {
  const iiifContent =
    "https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif";
 
  const handleItemInteraction = (item: Manifest | Collection) => {
    // do something with `item`
    console.log(item);
  };
 
  return (
    <Slider
      iiifContent={iiifContent}
      onItemInteraction={handleItemInteraction}
    />
  );
};

The returned value of item provides the entire object for your custom interaction.

{
  "id": "https://api.dc.library.northwestern.edu/api/v2/works/2de0355c-8e48-4478-93af-8cbd1437bd16?as=iiif",
  "type": "Manifest",
  "homepage": [
    {
      "id": "https://dc.library.northwestern.edu/items/2de0355c-8e48-4478-93af-8cbd1437bd16",
      "type": "Text",
      "format": "text/html",
      "label": {
        "none": ["Pulcinella \"tiepolano\""]
      }
    }
  ],
  "label": {
    "none": ["Pulcinella \"tiepolano\""]
  },
  "summary": {
    "none": ["Image"]
  },
  "thumbnail": [
    {
      "id": "https://api.dc.library.northwestern.edu/api/v2/works/2de0355c-8e48-4478-93af-8cbd1437bd16/thumbnail",
      "format": "image/jpeg",
      "type": "Image",
      "width": 400,
      "height": 400
    }
  ]
}

Collection Anatomy

Bloom accepts both Presentation API 2.x and Presentation API 3.0 Collections.

See Example Collection (opens in a new tab)

Header

Text

The top-level Collection label and summary (opens in a new tab) (if existing) data is mapped to a Header sub-component

"label": {
  "none": ["Commedia dell'Arte: The Masks of Antonio Fava"]
}

"summary": {
  "none": [
    "The Commedia dell'Arte, the famous improvisational theatre style born in Renaissance Italy, remains a major influence in today's theatre. Antonio Fava is an actor, comedian, author, director, musician, mask maker and Internationally renowned Maestro of Commedia dell'Arte."
  ]
}

Link

The top-level Collection homepage (opens in a new tab) represents the href attribute wrapping an HTML <a> element on the Header label

"homepage": [
  {
    "id": "https://dc.library.northwestern.edu/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd",
    "type": "Text",
    "label": { "none": ["Commedia dell'Arte: The Masks of Antonio Fava"] },
    "format": "text/html"
  }
]

Items

The items array (opens in a new tab) is mapped to the slider/carousel with each item rendering as an HTML <figure>

"items": [
  {
    "id": "https://iiif.stack.rdc.library.northwestern.edu/public/72/98/fd/ce/-a/dc/1-/45/01/-9/e1/4-/9e/8b/d9/85/e1/49-manifest.json",
    "type": "Manifest",
    "label": { "none": ["Pantalone classico"] },
    "summary": { "none": ["Image"] },
    "thumbnail": [
      {
        "id": "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f/full/200,/0/default.jpg",
        "type": "Image",
        "format": "image/jpeg",
        "service": [
          {
            "id": "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f",
            "profile": "http://iiif.io/api/image/2/level2.json",
            "type": "ImageService2"
          }
        ],
        "width": 200,
        "height": 200
      }
    ],
    "homepage": [
      {
        "id": "https://dc.library.northwestern.edu/items/7298fdce-adc1-4501-9e14-9e8bd985e149",
        "type": "Text",
        "label": { "none": ["Pantalone classico"] },
        "format": "text/html"
      }
    ]
  }
]

Text

For each item, the label and summary (opens in a new tab) (if existing) data are mapped to a <figcaption>

"label": { "none": ["Pantalone classico"] }

"summary": { "none": ["Image"] }

Image

For each item, the thumbnail (opens in a new tab) is rendered as an <img /> element within the <figure>

"thumbnail": [
  {
    "id": "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f/full/200,/0/default.jpg",
    "type": "Image",
    "format": "image/jpeg",
    "service": [
      {
        "id": "https://iiif.stack.rdc.library.northwestern.edu/iiif/2/180682c9-dfaf-4881-b7b6-1f2f21092d4f",
        "profile": "http://iiif.io/api/image/2/level2.json",
        "type": "ImageService2"
      }
    ],
    "width": 200,
    "height": 200
  }
]

Link

The homepage (opens in a new tab) for each item represents the href attribute of the HTML <a> element wrapping <figure>

"homepage": [
  {
    "id": "https://dc.library.northwestern.edu/items/7298fdce-adc1-4501-9e14-9e8bd985e149",
    "type": "Text",
    "label": { "none": ["Pantalone classico"] },
    "format": "text/html"
  }
]

Demo Demo