关于Vue3 Swiper的使用与自定义左右箭头

2,353 阅读1分钟

关于Vue3 Swiper的使用与自定义左右箭头

首先通过npm安装swiper插件
    npm install swiper (注意安装的是最新版)
之后引入

import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation } from "swiper";
import "swiper/css";
如下图:

image.png

image.png
引入并注册组件之后直接使用 image.png 属性说明如下图:

image.png 自定义左右轮播按钮

image.png 隐藏swiper自己的左右箭头按钮(这里用的是less)

image.png
参考文章: swiperjs.com/demos