轮播图左右按钮放到外面的思路

按钮放到外面的思路"/>

轮播图左右按钮放到外面的思路

本人用的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">&lt;</div><div class="after" @click="lunboright">&gt;</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();},