轮播图

@Swiper

Introduction

Swiper.js 提供多种应用方式，如 Swiper Vue、Swiper React 和 Swiper Element

Swiper Vue 后期可能被移除；建议使用 Swiper Element

更多使用请参考 Web - Swiper

安装 Installation

npm i swiper --save

注册 Register

import { register } from 'swiper/element/bundle';
register();

结构 Template

使用自定义元素构建

<swiper-container>

<swiper-slide>

使用 Usage

1.以属性方式传递 Parameters As Attributes

.以 kebab-case 的形式，特别是对象类的参数

.布尔类型不能简写，如仅仅指定 loop 无效，必须指定 loop = "true"

.建议为图片指定懒加载 - loading="lazy"

.适合参数少的情况

<swiper-container slides-per-view="3" loop="true">
    <swiper-slide>  1  </swiper-slide>
    <swiper-slide>  3  </swiper-slide>
    <swiper-slide>
        <img loading="lazy" src='https://cdn.pixabay.com/photo/2019/10/30/16/22/message-4589929_640.jpg' alt="">
    </swiper-slide>
</swiper-container>

分类	说明
autoplay-delay="1000"	自动播放延迟；单独指定autoplay无效
mousewheel-invert="true"	鼠标滚轮控制正向\|反向切换；单独指定mousewheel无效
grabCursor	显示小手鼠标
keyboard-enabled="true"	水平轮播使用左右方向键控制切换；垂直轮播使用上下方向键控制切换
direction	滚动方向水平horizontal还是垂直vertical。默认horizontal
thumbs-swiper=".my-thumbs"	为当前轮播指定缩略轮播；如二级导航
pagination="true"	分页器
navigation="true"	导航按钮
scrollbar="true"	滚动条
slidesPerView	轮播时可以查看幻灯片的个数；默认1张；可以是小数，如 2.2
spaceBetween	幻灯片间隔px；不要为幻灯片再额外指定margin
effect	滚动效果 slide \| fade \| cube \| flip \| ...更多效果细节需要额外配置

2.以原型参数方式传递 Parameters As Props

.获取轮播元素 → 创建配置参数 → 将参数分配给轮播元素

.适合参数多的情况

样式 Style

使用伪类选择器 :part 实现

仅适合 Swiper 元素和其子元素：container、button-prev、button-next、pagination、bullet、bullet-active、scrollbar

swiper-container::part(bullet-active) {
  background-color: #fff;
}

[] 轮播图 Swiper.vue

除了基本框架外，使用图片展示内容

为图片指定大小，撑开轮播图

通过调整定位 position，使分页器 pagination 定位到右侧

利用弹性盒子 flex，使指示器 bullet 水平垂直居中

进一步定制指示器 bullet 的静态样式和激活样式；初始化属性使用 initial

img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

swiper-container::part(bullet) {
  width: 6px;
  height: 15px;
  border-radius: var(--p-m-g);
  background-color: #fff;
  opacity: 0.4;
  transition: 0.4s;
}

swiper-container::part(bullet-active) {
  width: 6px;
  height: 15px;
  border-radius: var(--p-m-g);
  background-color: #fff;
}

swiper-container::part(pagination) {
  width: var(--p-m-g);
  height: 100%;
  top: 0;
  right: var(--p-m-g);
  left: initial;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--p-m-g);
}

事件 Events

切换时 swiperprogress

改变后 swiperslidechange

<swiper-container 
    loop="true"
    @swiperprogress="onProgress"
    @swiperslidechange="onSlideChange">
    ...
</swiper-container>

注意 Tips

Failed to resolve component: swiper-container If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

解决方法：在 vite.config.js 中配置 vue 节点

vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith("swiper-"),
    },
  },
})