Fancyapps

Dots ​

This plugin adds indicators to the carousel.

Examples ​

Basic example ​

1
2
3
4
5

JS Bin Example

Dynamic ​

When the number of slides exceeds the number specified by the dynamicFrom option, the dots are displayed in Instagram style.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

JS Bin Example

Use the dynamicPadd option to specify how many extra dots to show.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

JS Bin Example

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

JS Bin Example

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>'

dynamicFrom ​

From what number of slides to show "dynamic" dots

Type

number | false

Default

11

dynamicPadd ​

Number of extra full sized dots

Type

number

Default

4

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