swiper3的前进、后退按钮放到容器的外面

逃离我推掉我的手 2022-10-18 01:35 410阅读 0赞

先上效果图  
![在这里插入图片描述][20210604160118650.png]  
**注意：我用的swiper3的版本，版本不同初始化的方式不同  
我把前进、后退按钮放到了swiper-container2容器的外面，防止被外面的容器overflow掉**  
附上代码  
html

equipSwiperInit() { 
          var mySwiper = new Swiper(".swiper-container2", { 
            direction: "horizontal",
            loop: true,
            speed: 3000,
            slidesPerView: 4,
            autoplay: false,
            prevButton: ".swiper-button-prev",
            nextButton: ".swiper-button-next",
          });
        },

css

.equipBox { 
      position: absolute;
      top: 5vh;
      left: 2vw;
      width: 23vw;
      padding: 0 20px;
      box-sizing: border-box; .swiper-container2 { 
        width: 100%;
        overflow: hidden;
        color: #fff; .swiper-wrapper { 
          .swiper-slide { 
            padding: 0 5px;
            box-sizing: border-box; span { 
              padding: 0 20px;
              width: 100%;
              box-sizing: border-box;
              height: 30px;
              line-height: 30px;
              display: inline-block;
              background-image: url("../../../assets/images/sy/sybg/btnBg.png");
              background-size: 100% 100%;
            }
          }
        }
      }
      .swiper-button-prev, .swiper-button-next { 
        background-image: none;
        height: 100%;
        position: absolute;
        margin: 0;
        top: 0;
        z-index: 999;
      }
      .swiper-button-prev { 
        left: 0px; &:after { 
          content: "";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          display: inline-block;
          border-width: 10px;
          border-color: transparent #16f7ff transparent transparent;
          border-style: solid;
        }
      }
      .swiper-button-next { 
        right: -10px; &:after { 
          content: "";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          display: inline-block;
          border-width: 10px;
          border-color: transparent transparent transparent #16f7ff;
          border-style: solid;
        }
      }
    }

[20210604160118650.png]: /images/20221014/cafe2555acb34b4eb88bdf7fe4782fb8.png