useSwiper

Composable que te devuelve lo necesario para hacer un swiper.

Implementación del Composable:

import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

export function useSwiper() {
  return {
    Swiper,
    SwiperSlide,
    modules: [Pagination, Navigation, Autoplay],
  };
}

Ejemplo de uso en MediaCarousel:

<script setup lang="ts">
import Banner from "@ui/sliders/Banner.vue";
import { banner } from "@/mocks/banner";

const { Swiper, SwiperSlide, modules } = useSwiper();
</script>

<template>
  <Swiper
    class="slider-banner"
    :space-between="30"
    :hash-navigation="{
      watchState: true,
    }"
    :pagination="{
      clickable: true,
      type: 'bullets',
    }"
    :navigation="{
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }"
    :modules="modules"
  >
    <SwiperSlide
      v-for="(item, index) in banner"
      :key="item.id"
      :data-hash="`slide${index + 1}`"
    >
      <Banner :banner="item" />
    </SwiperSlide>
    <div class="swiper-button-next" aria-label="Next slide"></div>
    <div class="swiper-button-prev" aria-label="Previous slide"></div>
  </Swiper>
</template>

<style scoped lang="scss">
.slider-banner {
  height: 25rem;
  @include swiperStyles;
}
</style>