vue3使用swiper7

vue3中使用swiper7

基本使用

swiper

导入Swiper

导入组件

import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';

导入需要使用到swiper的组件模块

import SwiperCore, { Navigation, A11y } from 'swiper';

• 这里导入了Navigation模块, 也就是使用左右箭头来导航. 与A11y是一个无障碍模块

• 可以导入使用的模块 Swiper API (module)

注入

SwiperCore.use([Navigation, A11y]);

​ 将使用到的模块注入到SwiperCore里面

导入样式

import 'swiper/swiper.min.css';
import 'swiper/modules/navigation/navigation.min.css';

​ 第一个是基础轮播图样式, 第二个是要用swiper组件navigation的样式

<swiper> // 所有的轮播图都应该放在swiper标签里面。其他navigation左右箭头，pagination可以放外面
    <swiper-slide>swiper-slide> // 里面是一张一张轮播图
swiper>
<span>左箭头span> // 左右箭头可以放外面，告诉swiper这个箭头的类名即可。
<sapn>右箭头sapn>

使用

<swiper
        :slides-per-view="slidesPerView"
        :space-between="spaceBetween"
        :navigation="{ nextEl: '.my-next-el', prevEl: '.my-prev-el' }"
        @swiper="onSwiper"
        @activeIndexChange="onActiveIndexChange"
      >
swiper>

swiper组件接受的值

Swiper API (Parameters | props)

swiper组件行为, 可监听事件, 及返回的参数.

Swiper API (events)

监听swiper的事件会返回一个swiper实例，利用返回的实例可以通过调用其方法来对轮播图进行操作

const onSwiper = (swiper: any) => {
      swiper.slideTo(2);
};

可调用的方法

Swiper API ( Methods )

参考内容

导入

参考链接 vue3中使用swiper7

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';

// import Swiper core and required modules
import SwiperCore, { Navigation, A11y } from 'swiper';

SwiperCore.use([Navigation, A11y]);

// Import Swiper styles
import 'swiper/swiper.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import 'swiper/modules/pagination/pagination.min.css';
import 'swiper/modules/scrollbar/scrollbar.min.css';

/**
 * 如果嫌麻烦可以把上面的全部样式都删了，直接用总的
 * bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）
 */
// import "swiper/swiper-bundle.min.css";

定制navigation样式

参考链接 vue项目中swipe自定义pagination，navigationButton，鼠标滑过暂停播放