siwper vue 上下滑动分页_Vue 项目中 Swiper 轮播图分页器 swiper-pagination 无法显示问题...

首先根据自己项目需要下载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',

},