Thumbnails #

This plugin creates two types of thumbnail image bar - modern and classic. Uses lazy loading to save bandwidth by only loading visible thumbnails.

Modern
Apple Photos style thumbnails. Thumbnail dimensions and spacing can be easily adjusted using CSS variables.

Classic
Uses the Carousel component to create a new carousel instance and uses the Carousel Sync plugin to sync it with the main carousel.

Examples #

Modern thumbnails #

JSFiddle Example
StackBlitz Example

Classic thumbnails #

JSFiddle Example
StackBlitz Example

Usage #

Include corresponding JS and CSS files:

import { Thumbs } from "@fancyapps/ui/dist/carousel/carousel.thumbs.esm.js";
import "@fancyapps/ui/dist/carousel/carousel.thumbs.css";

If you prefer CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel/carousel.thumbs.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel/carousel.thumbs.umd.js"></script>

Pass plugin to the constructor.

const container = document.getElementById("myCarousel");
const options = {
  Thumbs: {
    type: "modern",
  },
};

new Carousel(container, options, { Thumbs });

Then use the data-thumb-src attribute on each slide element to specify the source of the thumbnail image, example:

<div class="f-carousel__slide" data-thumb-src="https://lipsum.app/id/1/256x144">
  <img data-lazy-src="https://lipsum.app/id/1/688x387" />
</div>

Options #

Carousel #

Customize carousel options

Type

Partial<CarouselOptionsType>

Default

{
    classes: {
        container: "f-thumbs f-classic-thumbs",
        viewport: "f-classic-thumbs__viewport",
        track: "f-classic-thumbs__track",
        slide: "f-classic-thumbs__slide",
    },
}

classes #

Class names for DOM elements

Type

Record<string, string>

Default

{
    container: "f-thumbs f-modern-thumbs",
    track: "f-modern-thumbs__track",
    slide: "f-modern-thumbs__slide",
    inSync: "in-sync",
    isSelected: "is-selected",
    isLoading: "is-loading",
    hasThumbs: "has-thumbs",
}

minCount #

Minimum number of slides with thumbnails in the carousel to create Thumbs

Type

number

Default

2

parentEl #

Change where thumbnail container is appended

Type

HTMLElement | null | (() => HTMLElement | null)

Default

null

thumbTpl #

Template for the thumbnail element

Type

string

Default

<button type="button" aria-label="{{GOTO}}"><img class="f-thumb" data-lazy-src="{{%s}}" alt="" /></button>

type #

Choose a type - "classic" (syncs two instances of the carousel) or "modern" (Apple Photos style)

Type

"classic" | "modern"

Default

modern