Vue3 项目中使用 Swiper(PC端可用)

一、安装

使用npm安装：

npm install swiper

二、注册

当您从节点模块导入 Swiper 自定义元素时，我们需要手动注册它。它应该只执行一次，它会全局注册 Swiper 自定义元素

// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
register();

三、使用

<template>
 <swiper-container class="swiper-container" 
  :mousewheel="true" 
  :mousewheelControl="true"
  swiper-mousewheel
  :slides-per-view="3" :pagination="false" scrollbar="false" 
  :speed="500" 
  :loop="false" 
  :navigation="{}" 
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper-container>

</template>

<style scoped lang="scss">
.swiper-container {
  width: 600px;
  height: 100px;
  // background-color: rgb(253, 148, 11);}
</style>

需要自己设置一下样式

设置 slides-per-view 后 <swiper-slide> 的宽度会根据 swiper-container 的宽度自动计算，以便能完美填充当前展示的区域：

如：设置 :slides-per-view="3"，<swiper-container /> 的 width: 600px;那么<swiper-slide>的宽度被计算出为 200px。因为同时显示3个，总宽度为600px，每个只能是200px。

常用参数介绍（注：slides-per-view 与 slidesPerView 一致）：

:mousewheel="true"	用于启用或禁用鼠标滚轮控制轮播的功能
:mousewheelControl="true"	同上
:slides-per-view="3"	设置slider容器能够同时显示的slides数量(为1就是轮播图)
:pagination="false"	是否展示分页(及下方的小圆点)
:scrollbar="false"	是否展示滑动条
:speed="500"	设置轮播的切换速度(单位：毫秒)
:loop="false"	是否循环播放
:navigation="{}"	显示左右两边的按钮
:autoplay="ture"	打开自动播放

四、官方文档

Swiper:

Swiper Element (WebComponent) (swiperjs.com)

配置选项可参考：

中文api - Swiper中文网
Swiper API (swiperjs.com)