首先根据自己项目需要下载swiper,可以通过npm,也可以下载到本地引用.我是本地引用.,注意自己下载的版本,我当时安装的版本的是Swiper3,然后引用后分页总是不出来
这是Swiper3的做法:
html>
..........................
...........................
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', })
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条 scrollbar: '.swiper-scrollbar',
})
注意点::::千万不要写成这种方式,Swiper3不支持这种格式(好像只有3以上的可以支持),会导致你的分页器之类的显示不出来.所以写的时候一定要注意你安装/引用的版本
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},