Fancyapps

Thumbs ​

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

Examples ​

Modern thumbnails ​

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

Sample image #1
Sample image #2
Sample image #3
Sample image #4
Sample image #5
Sample image #6
Sample image #7

Classic thumbnails ​

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

Sample image #1
Sample image #2
Sample image #3
Sample image #4
Sample image #5
Sample image #6
Sample image #7
Sample image #8
Sample image #9

Customized ​

Quickly change appearance and behavior using CSS variables. Here are some examples for your inspiration.

1
2
3
4
5
6
7
1
2
3
4
5
6
7
1
2
3
4
5
6
7

Usage ​

Include corresponding JS and CSS files:

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

Pass Thumbs to Carousel constructor or use plugins option.

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

Carousel(container, options, { Thumbs }).init();

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

html
<div class="f-carousel__slide" data-thumb-src="https://lipsum.app/id/1/256x144">
  <img
    data-lazy-src="https://lipsum.app/id/1/688x387"
    width="688"
    height="387"
    alt="Sample image #1"
  />
</div>

Options ​

Optional custom Carousel options

Type

Partial<CarouselOptions>

Default

undefined

minCount ​

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

Type

number

Default

2

parentEl ​

Optional element to place thumbnail container

Type

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

Default

undefined

showOnStart ​

If the thumbnail bar should automatically appear after the carousel is initialized

Type

boolean

Default

true

thumbTpl ​

Template for the thumbnail element

Type

string

Default

'<button aria-label="Slide to #{{page}}"><img draggable="false" alt="{{alt}}" data-lazy-src="{{src}}" /></button>'

type ​

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

Type

"classic" | "modern"

Default

"modern"

Methods ​

getContainer ​

Get reference to the container DOM element

Returns

HTMLElement

isEnabled ​

Check if thumbnails are enabled

Returns

boolean