Fancyapps
Return to top
On this page

Dots

This built-in plugin provides a pagination method with dots for any amount of slides.

Examples

Basic example

1
2
3
4
5

Dynamic

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

Usage

This is a built-in plugin and no additional files need to be loaded.

js
const container = document.getElementById("myCarousel");
const options = {
  Dots: {
    minCount: 2,
  },
};

new Carousel(container, options);

Options

classes

Class names for DOM elements

Type

Record<string, string>

Default

{
  list: "f-carousel__dots",
  isDynamic: "is-dynamic",
  hasDots: "has-dots",
  dot: "f-carousel__dot",
  isBeforePrev: "is-before-prev",
  isPrev: "is-prev",
  isCurrent: "is-current",
  isNext: "is-next",
  isAfterNext: "is-after-next",
}

dotTpl

HTML template for dot element

Type

string

Default

<button type="button" data-carousel-page="%i" aria-label="{{GOTO}}"><span class="f-carousel__dot" aria-hidden="true"></span></button>

dynamicFrom

Tthe number of pages after which to switch to "dynamic" type

Type

number | false

Default

11

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