Nuxt 3 中集成 Swiper 模块并实现高级导航控制

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

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-swiper'
    // 您可能还有其他模块
  ],
  // 其他 Nuxt 配置...
})

<!-- components/MyCarousel.vue -->
<template>
  <div class="carousel-container">
    <Swiper
      :modules="[SwiperAutoplay, SwiperNavigation, SwiperPagination]"
      :slides-per-view="1"
      :loop="true"
      :autoplay="{
        delay: 3000,
        disableOnInteraction: false,
      }"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :pagination="{
        clickable: true,
      }"
      @swiper="onSwiper"
    >
      <SwiperSlide v-for="i in 5" :key="i">
        <div class="slide-content">Slide {{ i }}</div>
      </SwiperSlide>
    </Swiper>

    <!-- 自定义导航按钮 -->
    <div class="custom-navigation">
      <button @click="prevSlide">上一张</button>
      <button @click="nextSlide">下一张</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 引入 Swiper 实例，此处不需要手动引入 Swiper 模块，
// 因为 `nuxt-swiper` 已经处理了全局注册和按需引入
// import { Swiper, SwiperSlide } from 'swiper/vue'; // 通常不需要手动引入
// import { Autoplay, Navigation, Pagination } from 'swiper/modules'; // 如果需要特定模块

// useSwiper 组合式函数由 nuxt-swiper 提供
const swiperInstance = ref(null);

const onSwiper = (swiper) => {
  swiperInstance.value = swiper;
};

const nextSlide = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slideNext();
  }
};

const prevSlide = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slidePrev();
  }
};
</script>

<style scoped>
.carousel-container {
  max-width: 800px;
  margin: 50px auto;
  position: relative;
}
.slide-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  font-size: 2em;
}
.custom-navigation {
  text-align: center;
  margin-top: 20px;
}
.custom-navigation button {
  padding: 10px 20px;
  margin: 0 10px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1em;
}
.custom-navigation button:hover {
  background-color: #0056b3;
}
</style>

<!-- components/SwiperNavigationButtons.vue -->
<template>
  <div class="navigation-buttons">
    <button @click="prev">上一张</button>
    <button @click="next">下一张</button>
  </div>
</template>

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

const swiper = useSwiper(); // 获取最近的 Swiper 实例

const prev = () => {
  if (swiper.value) {
    swiper.value.slidePrev();
  } else {
    console.warn('Swiper instance not found for previous slide.');
  }
};

const next = () => {
  if (swiper.value) {
    swiper.value.slideNext();
  } else {
    console.warn('Swiper instance not found for next slide.');
  }
};
</script>

<style scoped>
.navigation-buttons {
  margin-top: 20px;
  text-align: center;
}
.navigation-buttons button {
  padding: 10px 20px;
  margin: 0 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.navigation-buttons button:hover {
  background-color: #218838;
}
</style>

<!-- components/MyAdvancedCarousel.vue -->
<template>
  <div class="carousel-wrapper">
    <Swiper
      :modules="[SwiperAutoplay, SwiperNavigation, SwiperPagination]"
      :slides-per-view="1"
      :loop="true"
      :autoplay="{
        delay: 3000,
        disableOnInteraction: false,
      }"
      :pagination="{
        clickable: true,
      }"
    >
      <SwiperSlide v-for="i in 5" :key="i">
        <div class="slide-content">Advanced Slide {{ i }}</div>
      </SwiperSlide>
      <!-- 将导航按钮放置在 Swiper 组件内部，useSwiper 才能找到实例 -->
      <SwiperNavigationButtons />
    </Swiper>
  </div>
</template>

<script setup>
// 不需要手动导入 Swiper 组件，nuxt-swiper 会自动注册
import SwiperNavigationButtons from './SwiperNavigationButtons.vue';
</script>

<style scoped>
.carousel-wrapper {
  max-width: 800px;
  margin: 50px auto;
}
.slide-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  font-size: 2em;
  color: #0056b3;
}
</style>