feat(config): allow to overlay pagination component

Author: am

docs/source/api/index.md

@@ -221,6 +221,13 @@ The fill color of pagination dots. Any valid CSS color is accepted.
 * **Type**: `String`
 * **Default**: `#efefef`
 
+### paginationOverlay
+
+Flag to position the pagination component overlaying the images.
+
+* **Type**: `Boolean`
+* **Default**: `false`
+
 ### paginationPadding
 
 The padding inside each pagination dot. Pixel values are accepted.

play/index.js

@@ -370,3 +370,6 @@ play("Carousel", module)
       }
     }
   })
+  .add("Pagination overlay", h => createContainer(
+    h, containerWidth, [h(Carousel, { props: { paginationOverlay: true } }, generateSlideImages(h))]
+  ))

src/Carousel.vue

@@ -238,6 +238,13 @@ export default {
       type: Number,
       default: 10
     },
+    /**
+     * Enable the pagination to overlay the image slider
+     */
+    paginationOverlay: {
+      type: Boolean,
+      default: false
+    },
     /**
      * The size of each pagination dot
      * Pixel values are accepted

src/Pagination.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-show="carousel.pageCount > 1" class="VueCarousel-pagination">
+  <div
+    v-show="carousel.pageCount > 1"
+    class="VueCarousel-pagination"
+    v-bind:class="{ 'VueCarousel-pagination--overlay': carousel.paginationOverlay }"
+  >
     <ul class="VueCarousel-dot-container" role="tablist">
       <li
         class="VueCarousel-dot"
@@ -78,6 +82,11 @@ export default {
   text-align: center;
 }
 
+.VueCarousel-pagination--overlay {
+  position: absolute;
+  bottom: 0;
+}
+
 .VueCarousel-dot-container {
   display: inline-block;
   margin: 0 auto;