React中如何自定义Swiper导航按钮并移出Carts容器？

• 第一步：修改父容器溢出属性
  你的Carts容器大概率是因为overflow: hidden把移出的按钮裁掉了，修改这个属性：

  .Carts {
    overflow: visible !important; /* 用!important覆盖Swiper默认样式 */
  }
  

• 第二步：重新定位导航按钮
  给按钮设置绝对定位并调整层级，避免被遮挡：

  .swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* 自定义位置，将按钮移到容器外 */
    left: -30px;
    right: -30px;
  }
  

• 第三步：自定义按钮挂载位置（可选）
  如果上述方法无效，直接把导航按钮放在Carts容器外，初始化Swiper时指定自定义选择器：

  <button class="custom-prev-btn swiper-button-prev"></button>
  <div class="Carts swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">...</div>
    </div>
  </div>
  <button class="custom-next-btn swiper-button-next"></button>
  

  初始化代码：

  const swiper = new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.custom-next-btn',
      prevEl: '.custom-prev-btn',
    },
  });
  

内容的提问来源于stack exchange，提问作者Bahriddin