<template>
  <swiper class="h-full" :grabCursor="true" navigation :pagination="{ clickable: true }">
    <swiper-slide v-for="media in medias" class="aspect-w-16 aspect-h-12 md:aspect-h-9" :key="media.id">
        <video :src="media.url" controls></video>
    </swiper-slide>
  </swiper>
</template>


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

import "swiper/swiper-bundle.css";
// import "swiper/components/navigation/navigation.min.css";
// import "swiper/components/pagination/pagination.min.css";

SwiperCore.use([Navigation, Pagination]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    medias: Array,
    title: String,
    preview: String,
  },
  methods: {},
};
</script>
