Javascript Reactjs、swiperjs、Css如何将分页移动到滑块外部？边距、填充无效

请帮助。我尝试了很多，但都不起作用。我的要求是将分页移动到我想要的任何位置之外，但当我使用填充或边距时，它不起作用。如果我强制将其放置在滑块之外，它总是在滑块内。它被隐藏了

---

如果您想将分页移出，那么将其放置在Swiper容器外部将比将其放置在内部并破解CSS以将其显示在外部更容易

另一个选项是将swipebody的高度调大，这样就可以将分页放在div内，但放在幻灯片下方

要明确设置高度，可以使用height:60vh

我建议尽量避免使用它！重要的是，它有点粗糙

您可以尝试在分页上设置Z索引（）

---

您正在使用的IAs

从CSS中的*设置中去掉

框大小：框边框

，看看会发生什么（您可能需要在更改此设置的地方进行更精细的调整，但从这里开始）

---

框大小：框边框意味着您在元素上放置的任何边距或填充都将计算在其大小内，而不是放在其外部，听起来好像您希望它们影响元素的位置，而不是其大小的一部分。

您有框大小：框边框；设置为“一切”，这意味着您所做的任何边距或填充设置都将在元素的边框内计算，而不是在元素的边框外。这就是问题的原因吗？检查一下，当你仅仅为了测试而增加一个大的余量时，这对定位有什么影响吗？是的，它隐藏了sirHi@Sohit kumar，这里建议的选项中哪一个不起作用，或者两者都不起作用？将分页放在刷子外面的想法听起来很明智，您是否尝试过（例如，将刷子包装在另一个div中，并给该div加上边距等）

import React from "react";


import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Keyboard,
  Mousewheel,
  EffectCoverflow,
} from "swiper";

import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";
import "./Simple.css";

// install Swiper components
SwiperCore.use([
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Keyboard,
  Mousewheel,
  EffectCoverflow,
]);

const SimpleSwiper = () => {
  const params = {
    effect: "coverflow",
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: "auto",
    coverflowEffect: {
      rotate: 40,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    },
  };
  return (
    <div className="swipebody">
      <Swiper
        {...params}
        spaceBetween={50}
        slidesPerView={5}
        navigation
        pagination={{
          clickable: true,
          renderBullet: (index, className) => {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
        }}
        keyboard={true}
        mousewheel={true}
        // scrollbar={{ draggable: true }}
      >
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
        <SwiperSlide className="swiper-slide">
          <img src="https://picsum.photos/id/237/250/200" />
        </SwiperSlide>
      </Swiper>
    </div>
  );
};

export default SimpleSwiper;

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    
    
}

.swipebody{
    margin-top: 50px;
    width: 100%;
      height: 100%;
      position: relative;
    }
.swiper-slide {
  
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
  }
  .swiper-pagination {
    
    bottom: -10px !important;
    color: solid black;
    background-color: black;
    height: 20px;
    
}

.swiper-pagination-bullet{
  background-color: darkorange;
}
  .swiper-pagination-bullet-active {
      
    background-color: rgb(255, 0, 43);
    color: rgb(136, 255, 0);
  }