Skip to content

Commit 8e6008b

Browse files
committed
feat(config): allow to overlay pagination component
1 parent d8eed6a commit 8e6008b

File tree

4 files changed

+27
-1
lines changed

4 files changed

+27
-1
lines changed

docs/source/api/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,13 @@ The fill color of pagination dots. Any valid CSS color is accepted.
221221
* **Type**: `String`
222222
* **Default**: `#efefef`
223223

224+
### paginationOverlay
225+
226+
Flag to position the pagination component overlaying the images.
227+
228+
* **Type**: `Boolean`
229+
* **Default**: `false`
230+
224231
### paginationPadding
225232

226233
The padding inside each pagination dot. Pixel values are accepted.

play/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -370,3 +370,6 @@ play("Carousel", module)
370370
}
371371
}
372372
})
373+
.add("Pagination overlay", h => createContainer(
374+
h, containerWidth, [h(Carousel, { props: { paginationOverlay: true } }, generateSlideImages(h))]
375+
))

src/Carousel.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,13 @@ export default {
231231
type: Number,
232232
default: 10
233233
},
234+
/**
235+
* Enable the pagination to overlay the image slider
236+
*/
237+
paginationOverlay: {
238+
type: Boolean,
239+
default: false
240+
},
234241
/**
235242
* The size of each pagination dot
236243
* Pixel values are accepted

src/Pagination.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<template>
2-
<div v-show="carousel.pageCount > 1" class="VueCarousel-pagination">
2+
<div
3+
v-show="carousel.pageCount > 1"
4+
class="VueCarousel-pagination"
5+
v-bind:class="{ 'VueCarousel-pagination--overlay': carousel.paginationOverlay }"
6+
>
37
<ul class="VueCarousel-dot-container" role="tablist">
48
<li
59
class="VueCarousel-dot"
@@ -78,6 +82,11 @@ export default {
7882
text-align: center;
7983
}
8084
85+
.VueCarousel-pagination--overlay {
86+
position: absolute;
87+
bottom: 0;
88+
}
89+
8190
.VueCarousel-dot-container {
8291
display: inline-block;
8392
margin: 0 auto;

0 commit comments

Comments
 (0)