SwiperJS - 如何为分页器小圆点添加样式？

Question

在我的ReactJS应用程序中使用SwiperJS。我已经导入了默认的样式包，但是不知道如何样式化分页容器或子弹。在pagination:参数中......每次更改el：参数时，分页就会消失。每次更改bulletClass：时，我在css中添加的样式都不会应用。

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Pagination, Navigation, A11y } from 'swiper';
import 'swiper/swiper-bundle.css';
SwiperCore.use([Navigation, Pagination, A11y]);

return (
<>
<Swiper
    spaceBetween={50}
    slidesPerView={1}
    navigation
    pagination={{
       clickable: true,
       el: `swiper-container swiper-container-testClass`,
       bulletClass: `swiper-pagination-bullet swiper-pagination-testClass`
    }}
    wrapperTag='ul'
>
    <SwiperSlide tag='li' key={1}>
        {<div>My Data</div>}
    </SwiperSlide>
</Swiper>
</>
)

有人知道如何覆盖默认样式吗？具体来说，我想将 pagination-container 移动到幻灯片内容上方，而不是在底部幻灯片内（甚至看不到它）。

相关的API： Swiper React

- wongz

Answer 1

由于文档中没有关于这些内容的信息，我通过查看捆绑文件来发现了如何操作。

在那里，您可以找到可以修改以自定义滑块的变量，如下所示：

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

只需添加这些变量并在您的 swiper 滑块上设置任何颜色/大小/属性。

例如:

<Swiper style={{
  "--swiper-pagination-color": "#FFBA08",
  "--swiper-pagination-bullet-inactive-color": "#999999",
  "--swiper-pagination-bullet-inactive-opacity": "1",
  "--swiper-pagination-bullet-size": "16px",
  "--swiper-pagination-bullet-horizontal-gap": "6px"
}}>
  {content}
</Swiper>

- Hotcaffe

---

我在节点模块中查找了这些行，并发现了更多信息。如果有人想要详细修改分页或导航，可以在node_modules/swiper目录下搜索swiper-bundle.css。在那里，您可以找到为Swiper组件定义的变量和CSS。 - Ankit Sharma

Answer 2

将分页符的样式修改为圆点只需将以下代码添加到全局CSS中即可。

.swiper-pagination-bullet-active {
     background-color: #000 !important;
}

- Freesoul

---

如果没有全局CSS会怎样？ - Biax20

@Biax20 只需将其添加到项目中的任何 CSS 文件中，您可以随意命名它。 - Freesoul

Answer 3

我遇到了同样的问题，解决方法如下：

导入语句

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

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css"

// Import my scss file
import styles from './styles.module.scss'

// import Swiper core and required modules
import SwiperCore, {
  Pagination
} from 'swiper/core';

// install Swiper modules
SwiperCore.use([Pagination]);

首先，将我的组件包装在SliderWrapper类中，像这样：

return (
   <div className={styles.SliderWrapper}>
     <Swiper
       pagination={true}
    >
      <SwiperSlide>
         <div>{My Data}</div>
      </SwiperSlide>
      <SwiperSlide>
         <div>{My Data}</div>
      </SwiperSlide>
      <SwiperSlide>
         <div>{My Data}</div>
      </SwiperSlide>
    </Swiper>
  </div>
)

其次，我在浏览器中检查了哪些类应该用于覆盖样式。在我的情况下，是.swiper-pagination-bullet和.swiper-pagination-bullet-active

然后，窍门是在我的CSS中使用“：global”来为来自swiper的分页设置样式，就像下面的示例一样：

.sliderWrapper {
    :global(.swiper-pagination-bullet) {
      background: white;
      width: 1rem;
      height: 1rem;
      border-radius: .5rem;
      opacity: 1;
  }
  
  :global(.swiper-pagination-bullet-active) {
    background-color: blue;
    width: 5rem;
    height: 1rem;
    border-radius: .5rem;
  }
}

- Vitor Martins

---

选择器“:global(.swiper-pagination-bullet)”不是一个纯选择器（纯选择器必须包含至少一个本地类或ID）。当我使用你的代码时，我得到了这个错误。 - Salil Rajkarnikar

@SalilRajkarnikar 请分享更多细节，例如涉及的代码和您尝试解决问题的方法。 - Vitor Martins

Answer 4

你可以使用这些类名来覆盖分页符的默认样式：

/* target the active bullet */
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: blue;
  opacity: 1;
}

/* target all bullets */
.swiper-pagination-bullet {
  background-color: red;
  opacity: 1;
}

- Green

Answer 5

 /* change the size of the bullet and active color */

.swiper-pagination-bullet {
        background-color: blue;
        display: inline-block;
        width: 2rem;
        height: 2rem;
    }

    /* change color of next 2 bullets in sequence to white*/

.swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next {
    background-color: white;
}

    /* change color of previous bullet to white*/

.swiper-pagination-bullet-active-prev {
    background-color: white;
}

- ItaE

Answer 6

只需添加样式：

style={{
  "--swiper-navigation-color": "#000",
  "--swiper-pagination-color": "#fff",
}}

- Deucalion

---

请正确格式化代码。 - Jonatan Kruszewski

Answer 7

访问swiper-bundle.css文件（位于node_modules > swiper文件夹中），并指定类，我的情况下是.swiper-pagination-bullet和.swiper-pagination-bullet-active：

.swiper-pagination-bullet { /** Stylization of bookmarks that are not selected */
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
.swiper-pagination-bullet-active { /** Marker styling of selected image in carousel */
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

重要提示：为避免丢失所做的更改，请勿直接在文件中进行更改，将类别带入您的CSS中，然后再进行更改（您将把2个已识别的元素带入您的CSS并对其进行更改）。

- Victor Figueiredo

Answer 8

这个内联样式似乎是在使用滑动的 Web 组件版本时更改这些阴影元素的 CSS 的唯一方法，而他们也建议这样做... swiper 的文档太糟糕了。

<swiper-container pagination="true" class="cursor-pointer" style="--swiper-pagination-color: white;">
  <!-- add other swiper variables above, found in docs https://swiperjs.com/swiper-api#pagination-css-custom-properties -->
  <swiper-slide>
    <img class="" src="xyz">
  </swiper-slide>
</swiper-container>Q

- Leon A

---

更可怕的是，考虑到他们积极阻止开发人员在未来使用Vue组件，而倾向于采用这种不熟悉的Web组件方法。 - Leon A

https://css-tricks.com/styling-a-web-component/ 更多信息 - Leon A

另一种方法是创建自己的分页... - Raphaël Balet

Answer 9

我特别在页面加载时使用了useEffect，并将CSS附加到分页点类：

   useEffect(() => {
     const stylesheet = document.styleSheets[0];
     stylesheet.insertRule(".swiper-pagination-bullet-active { background: #284E80 !important;}", 0);   
   }, []);

- Richard Fogaca Nienkotter

Answer 10

以下是如何进行的方法：

对于所有项目，执行以下操作：

.swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  background-color: white;
}

对于 active 标记，执行以下操作：

.swiper-pagination .swiper-pagination-bullet-active {
  background-color: black;
}

- SnowdenMoses