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 `swiper.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 | * Initialize pagination
|
30 | */
|
31 | init(): void;
|
32 |
|
33 | /**
|
34 | * Destroy pagination
|
35 | */
|
36 | destroy(): void;
|
37 | }
|
38 |
|
39 | export interface PaginationEvents {
|
40 | /**
|
41 | * Event will be fired after pagination rendered
|
42 | */
|
43 | paginationRender: (swiper: Swiper, paginationEl: HTMLElement) => void;
|
44 |
|
45 | /**
|
46 | * Event will be fired when pagination updated
|
47 | */
|
48 | paginationUpdate: (swiper: Swiper, paginationEl: HTMLElement) => void;
|
49 |
|
50 | /**
|
51 | * Event will be fired on pagination hide
|
52 | */
|
53 | paginationHide: (swiper: Swiper) => void;
|
54 |
|
55 | /**
|
56 | * Event will be fired on pagination show
|
57 | */
|
58 | paginationShow: (swiper: Swiper) => void;
|
59 | }
|
60 |
|
61 | export interface PaginationOptions {
|
62 | /**
|
63 | * String with CSS selector or HTML element of the container with pagination
|
64 | *
|
65 | * @default null
|
66 | */
|
67 | el?: CSSSelector | HTMLElement | null;
|
68 |
|
69 | /**
|
70 | * String with type of pagination. Can be `'bullets'`, `'fraction'`, `'progressbar'` or `'custom'`
|
71 | *
|
72 | * @default 'bullets'
|
73 | */
|
74 | type?: 'bullets' | 'fraction' | 'progressbar' | 'custom';
|
75 |
|
76 | /**
|
77 | * Defines which HTML tag will be used to represent single pagination bullet. Only for `'bullets'` pagination type.
|
78 | *
|
79 | * @default 'span'
|
80 | */
|
81 | bulletElement?: string;
|
82 |
|
83 | /**
|
84 | * 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.
|
85 | *
|
86 | * @default false
|
87 | */
|
88 | dynamicBullets?: boolean;
|
89 |
|
90 | /**
|
91 | * The number of main bullets visible when `dynamicBullets` enabled.
|
92 | *
|
93 | * @default 1
|
94 | */
|
95 | dynamicMainBullets?: number;
|
96 |
|
97 | /**
|
98 | * Toggle (hide/show) pagination container visibility after click on Slider's container
|
99 | *
|
100 | * @default true
|
101 | */
|
102 | hideOnClick?: boolean;
|
103 |
|
104 | /**
|
105 | * If `true` then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type
|
106 | *
|
107 | * @default false
|
108 | */
|
109 | clickable?: boolean;
|
110 |
|
111 | /**
|
112 | * Makes pagination progressbar opposite to Swiper's `direction` parameter, means vertical progressbar for horizontal swiper
|
113 | * direction and horizontal progressbar for vertical swiper direction
|
114 | *
|
115 | * @default false
|
116 | */
|
117 | progressbarOpposite?: boolean;
|
118 |
|
119 | /**
|
120 | * format fraction pagination current number. Function receives current number,
|
121 | * and you need to return formatted value
|
122 | */
|
123 | formatFractionCurrent?: (number: number) => number;
|
124 |
|
125 | /**
|
126 | * format fraction pagination total number. Function receives total number, and you
|
127 | * need to return formatted value
|
128 | */
|
129 | formatFractionTotal?: (number: number) => number;
|
130 |
|
131 | /**
|
132 | * This parameter allows totally customize pagination bullets, you need to pass here a function that accepts `index` number of
|
133 | * pagination bullet and required element class name (`className`). Only for `'bullets'` pagination type
|
134 | *
|
135 | * @default null
|
136 | *
|
137 | * @example
|
138 | * ```js
|
139 | * const swiper = new Swiper('.swiper', {
|
140 | * //...
|
141 | * renderBullet: function (index, className) {
|
142 | * return '<span class="' + className + '">' + (index + 1) + '</span>';
|
143 | * }
|
144 | * });
|
145 | * ```
|
146 | */
|
147 | renderBullet?: (index: number, className: string) => void;
|
148 |
|
149 | /**
|
150 | * This parameter allows to customize "fraction" pagination html. Only for `'fraction'` pagination type
|
151 | *
|
152 | * @default null
|
153 | *
|
154 | * @example
|
155 | * ```js
|
156 | * const swiper = new Swiper('.swiper', {
|
157 | * //...
|
158 | * renderFraction: function (currentClass, totalClass) {
|
159 | * return '<span class="' + currentClass + '"></span>' +
|
160 | * ' of ' +
|
161 | * '<span class="' + totalClass + '"></span>';
|
162 | * }
|
163 | * });
|
164 | * ```
|
165 | */
|
166 | renderFraction?: (currentClass: string, totalClass: string) => void;
|
167 |
|
168 | /**
|
169 | * This parameter allows to customize "progress" pagination. Only for `'progress'` pagination type
|
170 | *
|
171 | * @default null
|
172 | *
|
173 | * @example
|
174 | * ```js
|
175 | * const swiper = new Swiper('.swiper', {
|
176 | * //...
|
177 | * renderProgressbar: function (progressbarFillClass) {
|
178 | * return '<span class="' + progressbarFillClass + '"></span>';
|
179 | * }
|
180 | * });
|
181 | * ```
|
182 | */
|
183 | renderProgressbar?: (progressbarFillClass: string) => void;
|
184 |
|
185 | /**
|
186 | * This parameter is required for `'custom'` pagination type where you have to specify
|
187 | * how it should be rendered.
|
188 | *
|
189 | * @default null
|
190 | *
|
191 | * @example
|
192 | * ```js
|
193 | * const swiper = new Swiper('.swiper', {
|
194 | * //...
|
195 | * renderCustom: function (swiper, current, total) {
|
196 | * return current + ' of ' + total;
|
197 | * }
|
198 | * });
|
199 | * ```
|
200 | */
|
201 | renderCustom?: (swiper: Swiper, current: number, total: number) => void;
|
202 |
|
203 | /**
|
204 | * CSS class name of single pagination bullet
|
205 | *
|
206 | * @default 'swiper-pagination-bullet'
|
207 | */
|
208 | bulletClass?: string;
|
209 |
|
210 | /**
|
211 | * CSS class name of currently active pagination bullet
|
212 | *
|
213 | * @default 'swiper-pagination-bullet-active'
|
214 | */
|
215 | bulletActiveClass?: string;
|
216 |
|
217 | /**
|
218 | * The beginning of the modifier CSS class name that will be added to pagination depending on parameters
|
219 | *
|
220 | * @default 'swiper-pagination-'
|
221 | */
|
222 | modifierClass?: string;
|
223 |
|
224 | /**
|
225 | * CSS class name of the element with currently active index in "fraction" pagination
|
226 | *
|
227 | * @default 'swiper-pagination-current'
|
228 | */
|
229 | currentClass?: string;
|
230 |
|
231 | /**
|
232 | * CSS class name of the element with total number of "snaps" in "fraction" pagination
|
233 | *
|
234 | * @default 'swiper-pagination-total'
|
235 | */
|
236 | totalClass?: string;
|
237 |
|
238 | /**
|
239 | * CSS class name of pagination when it becomes inactive
|
240 | *
|
241 | * @default 'swiper-pagination-hidden'
|
242 | */
|
243 | hiddenClass?: string;
|
244 |
|
245 | /**
|
246 | * CSS class name of pagination progressbar fill element
|
247 | *
|
248 | * @default 'swiper-pagination-progressbar-fill'
|
249 | */
|
250 | progressbarFillClass?: string;
|
251 |
|
252 | /**
|
253 | * CSS class name of pagination progressbar opposite
|
254 | *
|
255 | * @default 'swiper-pagination-progressbar-opposite'
|
256 | */
|
257 | progressbarOppositeClass?: string;
|
258 | /**
|
259 | * CSS class name set to pagination when it is clickable
|
260 | *
|
261 | * @default 'swiper-pagination-clickable'
|
262 | */
|
263 | clickableClass?: string;
|
264 |
|
265 | /**
|
266 | * CSS class name set to pagination when it is disabled
|
267 | *
|
268 | * @default 'swiper-pagination-lock'
|
269 | */
|
270 | lockClass?: string;
|
271 |
|
272 | /**
|
273 | * CSS class name set to pagination in horizontal Swiper
|
274 | *
|
275 | * @default 'swiper-pagination-horizontal'
|
276 | */
|
277 | horizontalClass?: string;
|
278 |
|
279 | /**
|
280 | * CSS class name set to pagination in vertical Swiper
|
281 | *
|
282 | * @default 'swiper-pagination-vertical'
|
283 | */
|
284 | verticalClass?: string;
|
285 | }
|