feat: Add Slider props to GallerySlider

Author: rstoenescu

dev/components/components/image-gallery.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
     <div class="layout-padding">
-      <h5>Gallery</h5>
+      <p class="caption">Gallery</p>
       <q-gallery :src="gallery"></q-gallery>
 
-      <h5>Gallery Slider</h5>
+      <p class="caption">Gallery Slider</p>
       <q-gallery-slider :src="slider"></q-gallery-slider>
+
+      <p class="caption">Gallery Slider with Infinite Scroll & Autoplay</p>
+      <q-gallery-slider dots infinite autoplay :src="secondSlider"></q-gallery-slider>
     </div>
   </div>
 </template>
@@ -25,24 +28,11 @@ export default {
       slider: [
         'statics/mountains.jpg',
         'statics/parallax1.jpg',
-        'statics/parallax2.jpg',
-        'statics/parallax1.jpg',
-        'statics/parallax2.jpg',
-        'statics/mountains.jpg',
-        'statics/mountains.jpg',
-        'statics/parallax1.jpg',
-        'statics/parallax2.jpg',
-        'statics/parallax1.jpg',
-        'statics/parallax2.jpg',
-        'statics/mountains.jpg',
-        'statics/parallax1.jpg',
-        'statics/parallax2.jpg',
-        'statics/parallax1.jpg',
-        'statics/parallax2.jpg',
+        'statics/parallax2.jpg'
+      ],
+      secondSlider: [
         'statics/mountains.jpg',
         'statics/parallax1.jpg',
-        'statics/parallax2.jpg',
-        'statics/parallax1.jpg',
         'statics/parallax2.jpg'
       ]
     }

src/vue-components/gallery/GallerySlider.vue

@@ -1,7 +1,14 @@
 <template>
   <q-slider
-    ref="slider" arrows fullscreen
+    ref="slider"
     @slide="__updateCurrentSlide"
+    :dots="dots"
+    :arrows="arrows"
+    :fullscreen="fullscreen"
+    :infinite="infinite"
+    actions
+    :animation="animation"
+    :autoplay="autoplay"
     class="text-white bg-black q-gallery-slider"
   >
     <div
@@ -39,11 +46,22 @@
 </template>
 
 <script>
+import sliderMixin from '../slider/slider-mixin'
+
 export default {
+  mixins: [sliderMixin],
   props: {
     src: {
       type: Array,
       required: true
+    },
+    arrows: {
+      type: Boolean,
+      default: true
+    },
+    actions: {
+      type: Boolean,
+      default: true
     }
   },
   data () {

src/vue-components/slider/Slider.vue

@@ -52,20 +52,10 @@ import { cssTransform } from '../../utils/dom'
 import { between, normalizeToInterval } from '../../utils/format'
 import animate from '../../utils/animate'
 import uid from '../../utils/uid'
+import sliderMixin from './slider-mixin'
 
 export default {
-  props: {
-    arrows: Boolean,
-    dots: Boolean,
-    fullscreen: Boolean,
-    infinite: Boolean,
-    actions: Boolean,
-    animation: {
-      type: Boolean,
-      default: true
-    },
-    autoplay: [Number, Boolean]
-  },
+  mixins: [sliderMixin],
   data () {
     return {
       position: 0,

src/vue-components/slider/slider-mixin.js

@@ -0,0 +1,14 @@
+export default {
+  props: {
+    arrows: Boolean,
+    dots: Boolean,
+    fullscreen: Boolean,
+    infinite: Boolean,
+    actions: Boolean,
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    autoplay: [Number, Boolean]
+  }
+}