首先根据自己项目需要下载swiper,可以通过npm,也可以下载到本地引用.我是本地引用.,注意自己下载的版本,我当时安装的版本的是Swiper3,然后引用后分页总是不出来
这是Swiper3的做法:
<!DOCTYPE html>
<html lang='en'>
<head>
..........................
<script src="./js/Swiper3/dist/js/swiper.js"></script>
<link rel="stylesheet" href="./js/Swiper3/dist/css/swiper.css">
...........................
</head>
<div class="swiper-container swiperClass" >
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in imgList">
<img :src="item" alt="图片未加载" class="pimg">
</div>
</div>
<div class="swiper-pagination" slot="pagination"></div>
</div>
varmySwiper =newSwiper ('.swiper-container', { direction:'vertical',// 垂直切换选项loop:true,// 循环模式选项// 如果需要分页器pagination: { el:'.swiper-pagination', },// 如果需要前进后退按钮navigation: { nextEl:'.swiper-button-next', prevEl:'.swiper-button-prev', },// 如果需要滚动条scrollbar: { el:'.swiper-scrollbar', }, })varmySwiper =newSwiper ('.swiper-container', { direction:'vertical',// 垂直切换选项loop:true,// 循环模式选项// 如果需要分页器pagination: { el:'.swiper-pagination', },// 如果需要前进后退按钮navigation: { nextEl:'.swiper-button-next', prevEl:'.swiper-button-prev', },// 如果需要滚动条scrollbar: { el:'.swiper-scrollbar', }, }) varmySwiper =newSwiper ('.swiper-container', { direction:'vertical', loop:true,// 如果需要分页器pagination:'.swiper-pagination',// 如果需要前进后退按钮nextButton:'.swiper-button-next', prevButton:'.swiper-button-prev',// 如果需要滚动条scrollbar:'.swiper-scrollbar', })varmySwiper =newSwiper ('.swiper-container', { direction:'vertical', loop:true,// 如果需要分页器pagination:'.swiper-pagination',// 如果需要前进后退按钮nextButton:'.swiper-button-next', prevButton:'.swiper-button-prev',// 如果需要滚动条scrollbar:'.swiper-scrollbar', })<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条 scrollbar: '.swiper-scrollbar',
})
</script>
注意点::::千万不要写成这种方式,Swiper3不支持这种格式(好像只有3以上的可以支持),会导致你的分页器之类的显示不出来.所以写的时候一定要注意你安装/引用的版本
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
网友评论