1 | import { Dom7Array } from 'dom7';
|
2 | import { CSSSelector } from '../shared';
|
3 | import Swiper from '../swiper-class';
|
4 |
|
5 | export interface PaginationMethods {
|
6 | /**
|
7 | * HTMLElement of pagination container element
|
8 | */
|
9 | el: HTMLElement;
|
10 |
|
11 | /**
|
12 | * Dom7 array-like collection of pagination bullets
|
13 | * HTML elements. To get specific slide HTMLElement
|
14 | * use `mySwiper.pagination.bullets[1]`.
|
15 | */
|
16 | bullets: Dom7Array[];
|
17 |
|
18 | /**
|
19 | * Render pagination layout
|
20 | */
|
21 | render(): void;
|
22 |
|
23 | /**
|
24 | * Update pagination state (enabled/disabled/active)
|
25 | */
|
26 | update(): void;
|
27 | }
|
28 |
|
29 | export interface PaginationEvents {
|
30 | /**
|
31 | * Event will be fired after pagination rendered
|
32 | */
|
33 | paginationRender: (swiper: Swiper, paginationEl: HTMLElement) => void;
|
34 |
|
35 | /**
|
36 | * Event will be fired when pagination updated
|
37 | */
|
38 | paginationUpdate: (swiper: Swiper, paginationEl: HTMLElement) => void;
|
39 |
|
40 | /**
|
41 | * Event will be fired on pagination hide
|
42 | */
|
43 | paginationHide: (swiper: Swiper) => void;
|
44 |
|
45 | /**
|
46 | * Event will be fired on pagination show
|
47 | */
|
48 | paginationShow: (swiper: Swiper) => void;
|
49 | }
|
50 |
|
51 | export interface PaginationOptions {
|
52 | /**
|
53 | * String with CSS selector or HTML element of the container with pagination
|
54 | */
|
55 | el?: CSSSelector | HTMLElement;
|
56 |
|
57 | /**
|
58 | * String with type of pagination. Can be "bullets", "fraction", "progressbar" or "custom"
|
59 | */
|
60 | type?: 'bullets' | 'fraction' | 'progressbar' | 'custom';
|
61 |
|
62 | /**
|
63 | * Defines which HTML tag will be use to represent single pagination bullet. Only for bullets pagination type.
|
64 | */
|
65 | bulletElement?: string;
|
66 |
|
67 | /**
|
68 | * Good to enable if you use bullets pagination with a lot of slides. So it will keep only few bullets visible at the same time.
|
69 | */
|
70 | dynamicBullets?: boolean;
|
71 |
|
72 | /**
|
73 | * The number of main bullets visible when dynamicBullets enabled.
|
74 | */
|
75 | dynamicMainBullets?: number;
|
76 |
|
77 | /**
|
78 | * Toggle (hide/true) pagination container visibility after click on Slider's container
|
79 | */
|
80 | hideOnClick?: boolean;
|
81 |
|
82 | /**
|
83 | * If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type
|
84 | */
|
85 | clickable?: boolean;
|
86 |
|
87 | /**
|
88 | * Makes pagination progressbar opposite to Swiper's `direction` parameter, means vertical progressbar for horizontal swiper
|
89 | * direction and horizontal progressbar for vertical swiper direction
|
90 | */
|
91 | progressbarOpposite?: boolean;
|
92 |
|
93 | /**
|
94 | * format fraction pagination current number. Function receives current number,
|
95 | * and you need to return formatted value
|
96 | */
|
97 | formatFractionCurrent?: (number: number) => number;
|
98 |
|
99 | /**
|
100 | * format fraction pagination total number. Function receives total number, and you
|
101 | * need to return formatted value
|
102 | */
|
103 | formatFractionTotal?: (number: number) => number;
|
104 |
|
105 | /**
|
106 | * This parameter allows totally customize pagination bullets, you need to pass here a function that accepts index number of
|
107 | * pagination bullet and required element class name (className). Only for bullets pagination type
|
108 | */
|
109 | renderBullet?: (index: number, className: string) => void;
|
110 |
|
111 | /**
|
112 | * This parameter allows to customize "fraction" pagination html. Only for fraction pagination type
|
113 | */
|
114 | renderFraction?: (currentClass: string, totalClass: string) => void;
|
115 |
|
116 | /**
|
117 | * This parameter allows to customize "progress" pagination. Only for progress pagination type
|
118 | */
|
119 | renderProgressbar?: (progressbarFillClass: string) => void;
|
120 |
|
121 | /**
|
122 | * This parameter is required for custom pagination type where you have to specify
|
123 | * how it should be rendered.
|
124 | *
|
125 | * @example
|
126 | * var swiper = new Swiper('.swiper-container', {
|
127 | * //...
|
128 | * renderCustom: function (swiper, current, total) {
|
129 | * return current + ' of ' + total;
|
130 | * }
|
131 | * });
|
132 | */
|
133 | renderCustom?: (swiper: Swiper, current: number, total: number) => void;
|
134 |
|
135 | /**
|
136 | * CSS class name of single pagination bullet
|
137 | */
|
138 | bulletClass?: string;
|
139 |
|
140 | /**
|
141 | * CSS class name of currently active pagination bullet
|
142 | */
|
143 | bulletActiveClass?: string;
|
144 |
|
145 | /**
|
146 | * The beginning of the modifier CSS class name that will be added to pagination depending on parameters
|
147 | */
|
148 | modifierClass?: string;
|
149 |
|
150 | /**
|
151 | * CSS class name of the element with currently active index in "fraction" pagination
|
152 | */
|
153 | currentClass?: string;
|
154 |
|
155 | /**
|
156 | * CSS class name of the element with total number of "snaps" in "fraction" pagination
|
157 | */
|
158 | totalClass?: string;
|
159 |
|
160 | /**
|
161 | * CSS class name of pagination when it becomes inactive
|
162 | */
|
163 | hiddenClass?: string;
|
164 |
|
165 | /**
|
166 | * CSS class name of pagination progressbar fill element
|
167 | */
|
168 | progressbarFillClass?: string;
|
169 |
|
170 | /**
|
171 | * CSS class name of pagination progressbar opposite
|
172 | */
|
173 | progressbarOppositeClass?: string;
|
174 | /**
|
175 | * CSS class name set to pagination when it is clickable
|
176 | */
|
177 | clickableClass?: string;
|
178 |
|
179 | /**
|
180 | * CSS class name set to pagination when it is disabled
|
181 | */
|
182 | lockClass?: string;
|
183 | }
|