按钮放到外面的思路"/>
轮播图左右按钮放到外面的思路
本人用的vue-awesome-swiper组件,组件默认的按钮是在里边的,如果改变left或right的值移到外侧会因为overflow:hidden;样式的影响而消失,我的做法是写一个假的按钮在外面,当点击假的按钮时获取轮播图按钮的dom结点进行“click”
先上效果图
隐藏轮播组件自带按钮前的效果图
接下来只要改动轮播组件按钮的left或right属性隐藏掉就行了
最终效果图
代码
<div class="preview-product"><my-swiperclass="preview-product-swiper":previewProduct="previewProduct":swiperType="'slidesPerView3'":options="options3"/><div class="before" @click="lunboleft"><</div><div class="after" @click="lunboright">></div></div>
轮播图配置参数
options3: {slidesPerView: 3,spaceBetween: 50,autoplay: true,loop: true,navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},},
methods中的方法
// 假的轮播左按钮点击lunboleft() {document.querySelector(".preview-product").querySelector(".swiper-button-prev").click();},
更多推荐
轮播图左右按钮放到外面的思路
发布评论