vue3 | swiper插件 | 轮播图

vue3实现轮播图

效果图：

swiper官网：swiper.js.cn/element

步骤：

1. npm安装swiper

npm install swiper

2. 注册和引入

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

3. 用法

demo

<template>
    <swiper-container
        ref="swiper"
        class="scroll_nav"
        :space-between="spaceBetween"
        :centered-slides="true"
        :pagenation="true"
      >
        <swiper-slide class="swiper_box" >
          <div class="box">这是页面一</div>
        </swiper-slide>
        <swiper-slide class="swiper_box" >
            <div class="box">这是页面二</div>
        </swiper-slide>
        <swiper-slide class="swiper_box" >
            <div class="box">这是页面三</div>
        </swiper-slide>
      </swiper-container>
</template>

<script setup>
import {ref} from 'vue'
// 引入swiper
import { register } from 'swiper/element/bundle'
register()

// 翻页
const spaceBetween = 10
const onProgress = (e) => {
  const [swiper, progress] = e.detail
  console.log(progress)
}
const onSlideChange = (e) => {
  console.log('slide changed')
}

let swiper = ref(null)
</script>

<style lang="scss" scoped>
.scroll_nav{
    width: 375px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    .swiper_box{
        width: 327px;
        display: flex;
        align-items: center;
        justify-content: center;
        .box{
            width: 200px;
            height: 100px;
            border-radius: 10px;
            background-color: aquamarine;
        }
    }
  
}
</style>

参数

• <swiper-container> - 定义所有参数的主要 Swiper 元素
• <swiper-slide> - Swiper 幻灯片元素
• init="false" 属性以防止 Swiper 初始化
• swiper 已初始化的 Swiper 实例可作为 Swiper 的 HTMLElement 的 swiper 属性使用
• navigation="true"分页
• pagination="true"导航
• scrollbar="true"滚动条
• lazy="true"懒加载
• thumbs.swiper缩略图

事件

所有 Swiper 事件 都可用作原生 DOM 事件但名称小写且带有 swiper 前缀（可通过 events-prefix 参数配置）。例如，slideChange 变成 swiperslidechange。

所有事件处理程序参数都作为数组传递到 event.detail 中

<swiper-container>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  ...
</swiper-container>

<script>
  const swiperEl = document.querySelector('swiper-container');

  swiperEl.addEventListener('swiperprogress', (event) => {
    const [swiper, progress] = event.detail;
  });

  swiperEl.addEventListener('swiperslidechange', (event) => {
    console.log('slide changed');
  });
</script>

插槽

默认情况下，所有 swiper-container 子项都作为 .swiper-wrapper 元素的子项呈现。如果你需要在之前或之后添加元素，则有两个可用的插槽

• container-start - 将在 .swiper-wrapper 之前呈现
• container-end - 将在 .swiper-wrapper 之后呈现

<swiper-container>
  <div slot="container-start">Rendered before wrapper</div>
  <div slot="container-end">Rendered after wrapper</div>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  ...
</swiper-container>

常用css样式

• container - <div class="swiper"> 的样式

• wrapper - <div class="swiper-wrapper"> 的样式

• button-prev - 上一个导航按钮 <div class="swiper-button-prev"> 的样式

• button-next - 下一个导航按钮 <div class="swiper-button-next"> 的样式

• pagination - 上一个分页容器 <div class="swiper-pagination"> 的样式

  • bullet - 分页项目元素的样式
  • bullet-active - 活动分页项目元素的样式

• scrollbar - - 滚动条容器 <div class="swiper-scrollbar"> 的样式`