Swiper前进后退按钮配置（去除默认前进后退按钮样式）

一般都用自定义的前进后退按钮：

<!-- 导航按钮 -->
      <div class="arrowCard swiper-button-prev">
        <img src="assets/arrow01.svg" alt="云智慧" />
      </div>
      <div class="arrowCard swiper-button-next">
        <img src="assets/arrow02.svg" alt="云智慧" />
      </div>

js中配置，绑定方法：

 navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",

          hiddenClass: "my-button-hidden",//隐藏时的class
          disabledClass: 'my-button-disabled',//不可用时的class
        },

删除默认的前进后退蓝色大按钮（太丑）

 /* 去除默认前进后退按钮 */
      .swiper-button-next:after {
        display: none;
      }
      .swiper-button-prev:after {
        display: none;
      }

 去除默认蓝色样式

类名为自己命名的前进后退类名：--swiper-theme-color:'';

.ProductToNumber .swiper_prev {
  left: -40px !important;
  --swiper-theme-color:''; 
}
.ProductToNumber .swiper_next {
  right: -40px !important;
  --swiper-theme-color:''; 
}

 

 

swiper提供了丰富的前进后退按钮配置及方法：

https://www.swiper.com.cn/api/navigation/355.html