swiper轮播下边点点不显示以及自带样式修改产生显示异常问题
这几天用vue-awesome-swiper3.1.3实现了一个轮播效果,下边的点点就是不显示。。不管怎么修改在网上百度到要用不同的写法之类,都不好使。改变思路,没用npm安装包,直接下载swiper.js(4.0版本)和swiper.css文件.用法如下<div class="swiper-container" @slideChangeTransitionEnd="getCu...
·
这几天用vue-awesome-swiper3.1.3实现了一个轮播效果,下边的点点就是不显示。。不管怎么修改在网上百度到要用不同的写法之类,都不好使。
改变思路,没用npm安装包,直接下载swiper.js(4.0版本)和swiper.css文件.
用法如下
<div class="swiper-container" @slideChangeTransitionEnd="getCurSlider"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="partners first"></div> //图片 </div> <div class="swiper-slide"> <div class="partners second"></div> </div> <div class="swiper-slide"> <div class="partners third"></div> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div>
data(){ return{ mySwiper:null, }
}
mounted(){ this.mySwiper = new Swiper('.swiper-container', { notNextTick: true, //设定初始化时slide的索引 initialSlide: 0, direction: 'horizontal', // 水平切换选项 loop: true, // 循环模式选项 autoplay: { disableOnInteraction: false,//手动滑动之后不打断播放 }, //滑动速度 speed: 1000, // 如果需要分页器 observer: true, //监听,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。 pagination: { el: '.swiper-pagination', }, observeParents:true//修改swiper的父元素时,自动初始化swiper 如果修改外层样式,这个一定要加!! }) } },
.swiper-container { padding: 0 0 20px 0; } .swiper-pagination { margin-left: -12px; } .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0px; }
更多推荐
已为社区贡献3条内容
所有评论(0)