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

关注

原创 2022-07-27 09:38:46 1.9k 阅读 AI 写同款· GEO 优化 ›

【前端知识之JS】JS原生手写轮播图 本系列主要整理前端面试中需要掌握的知识点。本节介绍如何用原生JS手写轮播图。阅读详情

本人用的vue-awesome-swiper组件，组件默认的按钮是在里边的，如果改变left或right的值移到外侧会因为overflow:hidden;样式的影响而消失，我的做法是写一个假的按钮在外面，当点击假的按钮时获取轮播图按钮的dom结点进行“click”

先上效果图

隐藏轮播组件自带按钮前的效果图

接下来只要改动轮播组件按钮的left或right属性隐藏掉就行了

最终效果图

代码

        <div class="preview-product">
          <my-swiper
            class="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();
    },

收录于