vue swiper实现导航切换

安装 Swiper 依赖

在 Vue 项目中安装 Swiper 和 Vue-Awesome-Swiper：

npm install swiper vue-awesome-swiper

引入 Swiper 组件

在需要使用的组件中引入 Swiper 相关模块：

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';

注册 Swiper 模块

在组件中注册 Navigation 模块并配置 Swiper：

export default {
  components: { Swiper, SwiperSlide },
  setup() {
    return {
      modules: [Navigation],
    };
  },
};

模板中使用 Swiper

在模板中添加 Swiper 容器和导航按钮：

<template>
  <swiper
    :modules="modules"
    :navigation="{
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </swiper>
</template>

自定义导航样式

添加 CSS 样式来自定义导航按钮的外观：

.swiper-button-prev,
.swiper-button-next {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 20px;
}

响应式配置

根据需要添加响应式配置：

<swiper
  :breakpoints="{
    640: {
      slidesPerView: 2,
    },
    768: {
      slidesPerView: 3,
    },
  }"
>

动态内容处理

如果需要动态生成 slides，可以使用 v-for：

<swiper-slide v-for="(item, index) in items" :key="index">
  {{ item }}
</swiper-slide>

事件处理

可以添加事件监听来处理滑动动作：

<swiper @slideChange="onSlideChange">

methods: {
  onSlideChange(swiper) {
    console.log('当前索引:', swiper.activeIndex);
  }
}