轮播

@Swiper Element

以Swiper Element 为例；更多使用，请访问 Swiper.js、html - swiper

安装 Installation

npm i swiper -S

注册 Register

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

结构 Template

配置参数：

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

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

.适合参数少的情况

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

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

.适合参数多的情况

<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无效
keyboard-enabled="true"	水平轮播使用左右方向键控制切换；垂直轮播使用上下方向键控制切换
direction	滚动方向水平horizontal还是垂直vertical。默认horizontal
thumbs-swiper=".my-thumbs"	为当前轮播指定缩略轮播；如二级导航
pagination="true"	分页器
navigation="true"	导航按钮
scrollbar="true"	滚动条
spaceBetween	幻灯片间隔px；不要为幻灯片再额外指定margin
effect	滚动效果 slide \| fade \| cube \| flip \| ...更多效果细节需要额外配置

为用到的图片指定懒加载 - loading="lazy"

事件 Events

切换时 swiperprogress

改变后 swiperslidechange

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

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