Vue 中使用 Swiper 实现中间大，两边小的轮播图

2023-09-20 13:17:27

一、Swiper 简介

Swiper 是一个免费且功能强大的 JavaScript 轮播图库，支持触摸滑动、自动轮播、分页导航、无限循环等多种功能。它具有以下特点：

易于使用：Swiper 提供了丰富的 API 和详细的文档，即使是新手也可以轻松上手。
响应式设计：Swiper 采用响应式设计，可以在各种设备上完美呈现，包括手机、平板电脑和台式电脑。
高性能：Swiper 经过精心优化，具有很高的性能，即使在处理大量图片时也能流畅运行。
丰富的扩展：Swiper 提供了丰富的扩展，如分页导航、自动轮播、无限循环等，满足各种场景的需求。

二、安装 Swiper

在 Vue 项目中使用 Swiper，需要先安装 Swiper 库。您可以使用以下命令安装：

npm install swiper

安装完成后，在您的 Vue 项目中引入 Swiper 库。在 main.js 文件中添加以下代码：

import Vue from 'vue'
import Swiper from 'swiper'

Vue.use(Swiper)

三、基本用法

在 Vue 项目中使用 Swiper 实现中间大，两边小的轮播图，可以按照以下步骤进行：

创建一个新的 Vue 组件，例如 SwiperComponent.vue。
在组件的模板中添加以下代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(image, index) in images" :key="index">
      <img :src="image" alt="">
    </div>
  </div>
  <div class="swiper-pagination"></div>
</div>

在组件的脚本中添加以下代码：

import Swiper from 'swiper'

export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg',
      ],
    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
    })
  },
}

在组件的样式表中添加以下代码：

.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  width: 300px;
  height: 300px;
  margin-right: 10px;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}

.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #fff;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

在您的 Vue 应用中使用该组件，例如在 App.vue 文件中添加以下代码：

<template>
  <div>
    <swiper-component></swiper-component>
  </div>
</template>

<script>
import SwiperComponent from './components/SwiperComponent.vue'

export default {
  components: {
    SwiperComponent,
  },
}
</script>