feat(core): slider

package.json

@@ -48,6 +48,8 @@
     "postcss": "8.3.7"
   },
   "dependencies": {
-    "@nuxtjs/eslint-config": "^6.0.1"
+    "@js-basics/vector": "^1.57.3",
+    "@nuxtjs/eslint-config": "^6.0.1",
+    "vue-slick-carousel": "^1.0.6"
   }
 }

packages/core/Slider/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <vue-slick-carousel v-bind="sliderSettings">
+    <template v-if="$scopedSlots.prev" #prevArrow="arrowOption">
+      <slot name="prev" :arrowOption="arrowOption" />
+    </template>
+    <template v-if="$scopedSlots.next" #nextArrow="arrowOption">
+      <slot name="next" :arrowOption="arrowOption" />
+    </template>
+    <template v-if="$scopedSlots.pagination" #customPaging="page">
+      <slot name="pagination" :page="page" />
+    </template>
+
+    <template #default>
+      <slot v-for="(slide, index) in slides" :slide="slide" :index="index" />
+    </template>
+  </vue-slick-carousel>
+</template>
+
+<script>
+import VueSlickCarousel from 'vue-slick-carousel';
+import 'vue-slick-carousel/dist/vue-slick-carousel.css';
+import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';
+import PointerNavigation from './../mixins/PointerNavigation';
+
+export default {
+  components: { VueSlickCarousel },
+  mixins: [PointerNavigation],
+  props: {
+    settings: {
+      type: Object,
+      default () {
+        return {};
+      }
+    },
+    slides: {
+      type: Array,
+      default () {
+        return [];
+      }
+    }
+  },
+
+  data () {
+    return {
+      defaultSettings: {
+        dots: false,
+        dotsClass: 'slick-dots custom-dot-class',
+        edgeFriction: 0.35,
+        infinite: false,
+        speed: 300,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false
+      }
+    };
+  },
+  computed: {
+    sliderSettings () {
+      return { ...this.defaultSettings, ...this.settings };
+    }
+  },
+
+  mounted () {
+    console.log('mounted slider', this.slides);
+  }
+};
+</script>
+
+<style>
+
+</style>