Merge pull request antoniandre#61 from chrisbarton126/feat/fractions

Added fraction support feature

Author: antoniandre

src/components/vueperslides/vueperslides.vue

@@ -45,6 +45,11 @@
 
     .vueperslides__paused(v-if="conf.pauseOnHover && $slots.pause")
       slot(name="pause")
+    .vueperslides__fractions(v-if="conf.fractions")
+      slot(
+        name="fraction"
+        v-bind:current="(slides.current + 1).toString()"
+        v-bind:total="slidesCount.toString()") {{ (slides.current + 1).toString() + " / " + slidesCount.toString() }}
     .vueperslides__arrows(
       :class="{ 'vueperslides__arrows--outside': conf.arrowsOutside }"
       v-if="conf.arrows && slidesCount > 1 && !disable")
@@ -126,6 +131,7 @@ export default {
     disableArrowsOnEdges: { type: [Boolean, String], default: false },
     bullets: { type: Boolean, default: true },
     bulletsOutside: { type: Boolean, default: null },
+    fractions: { type: Boolean, default: false },
     fade: { type: Boolean, default: false },
     slideContentOutside: { type: [Boolean, String], default: false },
     slideContentOutsideClass: { type: String, default: '' },
@@ -961,5 +967,16 @@ export default {
 
     &::-moz-focus-inner {border: 0;}
   }
+
+  &__fractions {
+    position: absolute;
+    top: 0.8em;
+    left: 0.5em;
+    z-index: 2;
+    padding: 0.5em 1em;
+    border: 1px solid #fff;
+    background: rgba(255, 255, 255, 0.3);
+    color: #fff;
+  }
 }
 </style>

src/documentation/index.vue

@@ -923,6 +923,20 @@
       <vueper-slide v-for="i in 10" :key="i" :title="i.toString()"></vueper-slide>
     </vueper-slides>
 
+  h3
+    a(href="#ex--fractions") Simplest with Fractions
+    a(name="ex--fractions")
+  p.
+    This example demonstrates a fraction display in the top corner illustrating progress through the slides. The
+    content can be overridden using the #[span.code fraction] slot, which accepts #[span.code current] and #[span.code total] properties.
+    The style of the fraction can be affected by overriding the #[span.code vueperslides__fractions] class.
+  vueper-slides.ex--simplest-ever(fractions)
+    vueper-slide(v-for="i in 5" :key="i" :title="i.toString()")
+  ssh-pre(language="html-vue" label="HTML Vue Template").
+    <vueper-slides fractions>
+      <vueper-slide v-for="i in 5" :key="i" :title="i.toString()"></vueper-slide>
+    </vueper-slides>
+
   h2
     a(href="#vueper-slides--api") #[span.code <vueper-slides>] API
     a(name="vueper-slides--api")