/home/henzagold/oldsite/components/ Current File: /home/henzagold/oldsite/components/Slick.vue
<template>
  <div :id="container">
    <slot/>
  </div>
</template>

<script>
export default {
  name: "slick",
  props: {
    container: {
      type: String,
      default: 'products-slider',
      required: false,
    },
    prevArrow: {
      type: String,
      default: '.products .slider-prev',
      required: false,
    },
    nextArrow: {
      type: String,
      default: '.products .slider-next',
      required: false,
    },
    slidesToShow: {
      type: Number,
      default: 3,
      required: false,
    },
    slidesToScroll: {
      type: Number,
      default: 1,
      required: false,
    },
    arrows: {
      type: Boolean,
      default: true,
      required: false,
    },
    rtl: {
      type: Boolean,
      default: true,
      required: false,
    },
    dots: {
      type: Boolean,
      default: false,
      required: false,
    },
    autoplay: {
      type: Boolean,
      default: false,
      required: false,
    },
    responsive: {
      type: Array,
      default: () => {
        return [
          {
            breakpoint: 991,
            settings: {
              slidesToShow: 2,
            }
          },
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 1,
            }
          }
        ]
      },
      required: false,
    },
  },
  mounted() {

     $("#"+this.container).slick({
       slidesToShow: this.slidesToShow,
       rtl: this.rtl,
       slidesToScroll: this.slidesToScroll,
       arrows: this.arrows,
       prevArrow: $(this.prevArrow),
       nextArrow: $(this.nextArrow),
       dots: this.dots,
       autoplay: this.autoplay,
       responsive: this.responsive
     });
  }
}
</script>

<style>
.slick-track {
  padding: 20px 0;
}
</style>