Reactjs，swiperjs，Css-如何将分页移出滑块?边距，填充不起作用

import React from 'react';
import Swiper from 'swiper';

class MySwiper extends React.Component {
  componentDidMount() {
    // 在组件挂载后初始化Swiper实例
    new Swiper('.swiper-container', {
      // 设置其他配置项
      pagination: {
        el: '.swiper-pagination',
      },
    });
  }

  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          {/* 添加滑块内容 */}
          <div className="swiper-slide">Slide 1</div>
          <div className="swiper-slide">Slide 2</div>
          <div className="swiper-slide">Slide 3</div>
        </div>
        {/* 添加分页器 */}
        <div className="swiper-pagination"></div>
      </div>
    );
  }
}

export default MySwiper;

.swiper-container {
  /* 设置容器样式 */
}

.swiper-wrapper {
  /* 设置滑块样式 */
}

.swiper-pagination {
  /* 设置分页器样式 */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}