feat(render): Add slots to allow custom navigation and pagination (SS…

…ENSE#293)

Allow custom components to be used for rendering pagination and navigation, with access to the `carousel` provider.

docs/source/api/index.md

@@ -169,3 +169,27 @@ Stage padding option adds left and right padding style (in pixels) onto VueCarou
 * **Type**: `Number`
 * **Default**: `0`
 
+## Custom Pagination & Navigation
+
+Use named slots to render pagination and navigation using components.
+
+``` html
+  <carousel>
+    <slide>
+      Slide 1 Content
+    </slide>
+    <slide>
+      Slide 2 Content
+    </slide>
+
+    <numbered-pagination slot="pagination" />
+    <stylish-navigation slot="navigation" />
+  </carousel>
+```
+
+Your components can access the `carousel` provider by adding the following to you component configuration:
+
+```js
+	name: "numbered-pagination",
+	inject: ["carousel"]
+```

src/Carousel.vue

@@ -27,18 +27,19 @@
       </div>
     </div>
 
-    <pagination 
-      v-if="paginationEnabled"
-      @paginationclick="goToPage($event, 'pagination')"
-    />
-
-    <navigation 
-      v-if="navigationEnabled && isNavigationRequired"
-      :clickTargetSize="navigationClickTargetSize"
-      :nextLabel="navigationNextLabel"
-      :prevLabel="navigationPrevLabel"
-      @navigationclick="handleNavigation"
-    />
+    <slot name="pagination" v-if="paginationEnabled">
+      <pagination @paginationclick="goToPage($event, 'pagination')"/>
+    </slot>
+
+    <slot name="navigation" v-if="navigationEnabled">
+      <navigation
+        v-if="isNavigationRequired"
+        :clickTargetSize="navigationClickTargetSize"
+        :nextLabel="navigationNextLabel"
+        :prevLabel="navigationPrevLabel"
+        @navigationclick="handleNavigation"
+      />
+    </slot>
   </section>
 </template>
 <script>