1.安装

npm install swiper --save

2.swiper引入方式

swiper5：

import Swiper from 'swiper' // js 模块 import 'swiper/css/swiper.css'; // css 模块

swiper6：

import Swiper, { Pagination, Navigation, Autoplay } from 'swiper' // js 模块 import 'swiper/swiper-bundle.css' // css 模块 Swiper.use([Pagination, Navigation, Autoplay])

swiper6只能按需引入

css文件夹路径改变

3.初始化

// eslint-disable-next-line no-unused-vars const swiper = new Swiper('.filmswiper', { // direction: 'vertical', loop: true, centeredSlides: true, // 如果需要分页器 pagination: { el: '.swiper-pagination', clickable: true // 允许分页点击跳转 }, // 自动轮播 autoplay: { delay: 2000, disableOnInteraction: false }, //导航小点 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } })

4.一个页面有多个轮播图

需要new多个轮播图实例，为了互相不影响，可以在基础类前面加上父类

// eslint-disable-next-line no-unused-vars const swiper = new Swiper('.filmswiper1', { // direction: 'vertical', loop: true, centeredSlides: true, // 如果需要分页器 pagination: { el: '.filmswiper1 .swiper-pagination', clickable: true // 允许分页点击跳转 }, // 自动轮播 autoplay: { delay: 2000, disableOnInteraction: false }, //导航小点 navigation: { nextEl: '.filmswiper1 .swiper-button-next', prevEl: '.filmswiper1 .swiper-button-prev' } }) // eslint-disable-next-line no-unused-vars const swiper = new Swiper('.filmswiper2', { // direction: 'vertical', loop: true, centeredSlides: true, // 如果需要分页器 pagination: { el: '.filmswiper2 .swiper-pagination', clickable: true // 允许分页点击跳转 }, // 自动轮播 autoplay: { delay: 2000, disableOnInteraction: false }, //导航小点 navigation: { nextEl: '.filmswiper2 .swiper-button-next', prevEl: '.filmswiper2 .swiper-button-prev' } })

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。