Nuxt 3 中集成 Swiper 并解决 useSwiper() 未定义问题

npm install nuxt-swiper
# 或者
yarn add nuxt-swiper

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-swiper' // 确保 'nuxt-swiper' 在 modules 数组中
    // 其他模块...
  ]
})

<template>
  <div class="my-carousel-container">
    <Swiper
      :modules="[SwiperAutoplay, SwiperNavigation, SwiperPagination]"
      :slides-per-view="1"
      :loop="true"
      :autoplay="{
        delay: 8000,
        disableOnInteraction: true,
      }"
      :navigation="true"
      :pagination="{ clickable: true }"
      @swiper="onSwiperInit"
    >
      <SwiperSlide v-for="i in 5" :key="i">
        <div class="slide-content">Slide {{ i }}</div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 注意：这里我们还没有直接使用 useSwiper()，而是在 @swiper 事件中获取实例
const onSwiperInit = (swiper) => {
  console.log('Swiper instance initialized:', swiper);
  // 可以在这里保存 swiper 实例，或者在需要时通过 useSwiper() 获取
};
</script>

<style scoped>
.my-carousel-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  height: 300px; /* 示例高度 */
  border: 1px solid #eee;
}
.slide-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 2em;
  background-color: #f0f0f0;
}
</style>

<template>
  <div class="custom-carousel-wrapper">
    <Swiper
      :modules="[SwiperAutoplay]"
      :slides-per-view="1"
      :loop="true"
      :autoplay="{
        delay: 5000,
        disableOnInteraction: false,
      }"
      class="my-custom-swiper"
    >
      <SwiperSlide v-for="i in 3" :key="i">
        <div class="slide-content">Custom Slide {{ i }}</div>
      </SwiperSlide>
    </Swiper>

    <div class="navigation-buttons">
      <button @click="prevSlide">上一页</button>
      <button @click="nextSlide">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { useSwiper } from '#imports'; // 从 #imports 导入 useSwiper

// 获取当前 Swiper 实例
// 注意：useSwiper() 必须在 Swiper 组件的子组件或与 Swiper 组件处于同一层级的组件中使用
// 否则可能无法获取到正确的实例
const swiper = useSwiper();

const prevSlide = () => {
  if (swiper.value) {
    swiper.value.slidePrev();
  }
};

const nextSlide = () => {
  if (swiper.value) {
    swiper.value.slideNext();
  }
};
</script>

<style scoped>
.custom-carousel-wrapper {
  width: 100%;
  max-width: 700px;
  margin: 20px auto;
  border: 1px solid #ccc;
  position: relative;
}
.my-custom-swiper {
  height: 250px; /* 示例高度 */
}
.slide-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.8em;
  background-color: #e9f7ef;
  color: #333;
}
.navigation-buttons {
  text-align: center;
  margin-top: 15px;
}
.navigation-buttons button {
  padding: 10px 20px;
  margin: 0 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}
.navigation-buttons button:hover {
  background-color: #0056b3;
}
</style>