轮播图操作过程:
1引包
import Swiper from 'swiper';
2引入样式
import 'swiper/swiper-bundle.css';
3结构
4new Swpier实例
var mySwiper = new Swiper('.swiper-container',{
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
结果是:轮播图不能左右点击,但是可以长按左右滑动,分页器也没有
参考很多文章,主要解决通过
解决方法:
在第六版导入只能导入swiper核心内容,而部分组件效果如分页器需要单独导入
引入下面的即可:
import Swiper, { Pagination, Navigation } from 'swiper'
Swiper.use([Pagination, Navigation])