vue3使用swiper7
基本使用
F:\tomatoGames\huluwa_home\src\components\Title-Swiper.vue
导入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> // 左右箭头可以放外面
<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的事件会返回一个swiper实例，利用返回的实例可以通过调用其方法来对轮播图进行操作
const onSwiper = (swiper: any) => {
swiper.slideTo(2);
};
可调用的方法
参考内容
导入
参考链接 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";
