SwiperJS - 你如何设计分页项目符号？答案

【问题标题】：SwiperJS - How do you style the Pagination Bullets?SwiperJS - 你如何设计分页项目符号？
【发布时间】：2021-01-06 04:19:47
【问题描述】：

在我的 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>
</>
)

有人知道如何覆盖默认样式吗？也就是说，我希望将分页容器移动到幻灯片内容上方，而不是在底部的幻灯片内（甚至看不到它）。

有问题的 API：Swiper React

【问题讨论】：

标签： javascript swiper swiperjs

【解决方案1】：

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

导入语句

// 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;
  }
}

【讨论】：

选择器 ":global(.swiper-pagination-bullet)" 不是纯的（纯选择器必须至少包含一个本地类或 id）。当我使用你的代码时，我得到了这个错误
@SalilRajkarnikar 请分享更多详细信息，例如涉及的代码以及您解决问题的尝试

【解决方案2】：

要设置分页项目符号的样式，只需将此行添加到全局 CSS

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

【讨论】：

【解决方案3】：

 /* 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;
}

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案5】：

我在使用 Vue.js 时遇到了类似的问题，我认为覆盖默认样式的唯一方法是使用 css !important 但并非总是如此，例如，如果您想更改项目符号颜色，您可以访问项目符号默认样式，而无需强制默认样式

/* change active bullet color to red */
.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    background-color: red;
}


/*move swiper pagination on top to image */
.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    top: 0 !important;
}

【讨论】：

【解决方案6】：

这是怎么做的

对于所有项目符号，请执行以下操作

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

为活动项目符号执行以下操作：

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

【讨论】：