Slider

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

Collection ↗

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. Slider does require you to load swiper.js (opens in a new tab) styling to the side. These stylesheets are not compiled with the @samvera/clover-iiif package, however are bundled as a dependency when installing Clover IIIF.

import Slider from "@samvera/clover-iiif/slider";
 
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

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`	`SwiperProps["breakpoints"]`	No
`options.credentials`	`omit`, `same-origin`, `include`	No	`omit`

Custom Breakpoints

Slider uses default values per Swiper's breakpoints API . You may customize your own by passing in a breakpoints object, ie:

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,
      spaceBetween: 20,
    },
    480: {
      slidesPerView: 3,
      spaceBetween: 30,
    },
    640: {
      slidesPerView: 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