Vue 项目中 Swiper 轮播图分页器 swiper-pagination 无法显示问题

首先根据自己项目需要下载swiper,可以通过npm,也可以下载到本地引用.我是本地引用.,注意自己下载的版本,我当时安装的版本的是Swiper3,然后引用后分页总是不出来

这是Swiper3的做法:

..........................

    

    

...........................

    

           

                     

             

     

     

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', }) 

注意点::::千万不要写成这种方式,Swiper3不支持这种格式(好像只有3以上的可以支持),会导致你的分页器之类的显示不出来.所以写的时候一定要注意你安装/引用的版本

pagination: {

     el: '.swiper-pagination',

 }, 

// 如果需要前进后退按钮 

navigation: { 

    nextEl: '.swiper-button-next', 

    prevEl: '.swiper-button-prev', 

}, 

// 如果需要滚动条 

scrollbar: { 

    el: '.swiper-scrollbar',

 },

你可能感兴趣的:(Vue 项目中 Swiper 轮播图分页器 swiper-pagination 无法显示问题)