Slider

<template>
  <Swiper
    tag="section"
    :modules="modules"
    :breakpoints="breakpoints"
    slides-per-view="3.2"
    @swiper="onSwiper"
    @breakpoint="onBreakpoint"
  >
    <SwiperSlide v-for="slide in slides" :key="slide">
      <component :is="slide.component" :data="slide"/>
    </SwiperSlide>

      <nav
        class="flex justify-center"
        v-if="!hideNavigation && swiper && slides && slides.length > currentSlidesPerView"
      >
        <CustomButton
          icon_class="inline-block"
          icon_left="nav-arrow-left"
          :className="'x-btn--white x-btn--icon-only' + (swiper && swiper.isBeginning ? ' x-btn--ghost--disabled' : '')"
          @click="!swiper.isBeginning && swiper.slidePrev()"
        />
        <CustomButton
          icon_class="inline-block"
          icon_left="nav-arrow-right"
          :className="'x-btn--white x-btn--icon-only ml-2' + (swiper && swiper.isEnd ? ' x-btn--ghost--disabled' : '')"
          @click="!swiper.isEnd && swiper.slideNext()"
        />
      </nav>
  </Swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation } from 'swiper';

import 'swiper/css';
import 'swiper/css/navigation';

import CustomButton from '../../Atoms/button/button.vue';
export default {
  components: {
    Swiper,
    SwiperSlide,
    CustomButton
  },
  props: {
    slides: {
      type: Array
    },
    wrapAround: {
      type: Boolean,
      default: true
    },
    className: {
      type: String
    },
    breakpoints: {
      type: Object,
    },
    hideNavigation: {
      type: Boolean,
      default: false,
    },
    hidePagination: {
      type: Boolean,
      default: false,
    }
  },
  data: () => {
    return {
      swiper: null,
      currentSlidesPerView: 0
    }
  },
  computed: {

  },
  methods: {
    onSwiper(swiper) {
      this.swiper = swiper;
    },
    onBreakpoint(swiper, breakpointParams){
      this.currentSlidesPerView = breakpointParams.slidesPerView
    }
  },
  setup() {
    return {
      modules: [Navigation],
    };
  },
}
</script>
<style>
  .swiper-wrapper {
    @apply h-auto;
  }
</style>