Fancyapps

Dots ​

This plugin adds indicators to the carousel.

Examples ​

Basic example ​

1
2
3
4
5

Customized ​

Use dotTpl option to change template for each indicator. In the template, %d will be replaced with the corresponding page number. Add the data-carousel-go-to="%i" attribute to any HTML element to make it act as a navigation element.

1
2
3
4
5

Usage ​

Include corresponding JS and CSS files:

js
import { Dots } from "@fancyapps/ui/dist/carousel/carousel.dots.js";
import "@fancyapps/ui/dist/carousel/carousel.dots.css";

Pass Dots to Carousel constructor or use plugins option.

js
const container = document.getElementById("myCarousel");
const options = {
  // Your custom options
};

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

Options ​

dotTpl ​

HTML template for dot element

Type

string

Default

'<button class="f-carousel__dot" data-carousel-go-to="%i" aria-label="{{GOTO}}"></button>'

maxCount ​

The maximum number of pages at which to create dots

Type

number

Default

Infinity

minCount ​

The minimum number of pages at which to create points

Type

number

Default

2