【Vue】vue2项目使用swiper5.4.5轮播图2024年1月5日实战保姆级教程（已过时）

由于时间较早，Swiper 版本已经更新，并且 Vue 生态系统中的 Swiper 组件可能已有更好的选择。因此，以下代码示例可能不适用于最新的 Swiper 版本。

以下是一个使用 Vue 2 项目中 Swiper 5.4.5 的基本示例：

首先，安装 Swiper：

npm install swiper@5.4.5

然后，在 Vue 组件中使用 Swiper：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="slide in slides" :key="slide">Slide {{ slide }}</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>
 
<script>
// 引入 Swiper 的 CSS
import 'swiper/css/swiper.css';
// 引入 Swiper 的基础模块
import { Swiper, SwiperSlide } from 'swiper/vue';
import SwiperCore, { Pagination, Navigation, Scrollbar } from 'swiper';
 
// 使 Swiper 的组件可用
SwiperCore.use([Pagination, Navigation, Scrollbar]);
 
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      slides: [1, 2, 3, 4, 5]
    };
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      const swiper = new Swiper('.swiper-container', {
        // 配置选项
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      });
    }
  }
};
</script>
 
<style>
.swiper-container {
  width: 600px;
  height: 300px;
}
</style>

在这个示例中，我们首先导入了 Swiper 的 CSS 和 Vue 组件 Swiper 及 SwiperSlide。然后，我们在 mounted 钩子中初始化了 Swiper 实例，并配置了轮播图的基本选项，如是否循环 (loop)、分页器、导航按钮和滚动条。这个示例提供了使用 Swiper 的基础，并且展示了如何在 Vue 组件中集成。