Vue3中使用Swiper的完整版教程(超详细!)

Swiper是一款非常流行的轮播图插件，这里介绍如何在Vue3中使用Swiper。

安装Swiper插件

使用以下命令安装Swiper：

npm install swiper

如果你已经在项目中安装了jQuery，那么就不需要再安装Swiper了。

引入Swiper插件

在Vue3中，你可以使用以下方式引入Swiper插件：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';

export default {
  mounted() {
    new Swiper('.swiper-container', {
      //Swiper的参数配置
    });
  }
};
</script>

这里我们在Vue3的组件中引入Swiper，并在mounted生命周期中初始化Swiper。

Swiper的参数配置

Swiper有很多可配置的参数，你可以根据自己的需求进行选择。

以下是一个常用的配置示例：

new Swiper('.swiper-container', {
  //自动播放(单位为毫秒)
  autoplay: {
    delay: 5000, //每隔5秒自动播放下一张
  },
  //设置分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,  //点击分页器可以切换
  },
  //设置左右箭头
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

在Vue3中使用Swiper的示例

示例1：基本轮播图

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';

export default {
  mounted() {
    new Swiper('.swiper-container', {
      autoplay: {
        delay: 5000,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      }
    });
  }
};
</script>

这里我们创建一个基本的轮播图，包括三张轮播图和分页器，而没有左右箭头。

示例2：带有左右箭头的轮播图

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';

export default {
  mounted() {
    new Swiper('.swiper-container', {
      autoplay: {
        delay: 5000,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });
  }
};
</script>

这里我们创建一个带有左右箭头的轮播图，而没有分页器。