javascript - SwiperJS - 你如何设计分页项目符号?
问题描述
在我的 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
解决方案
我有同样的问题,我解决的方法是:
导入语句
// 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;
}
}
推荐阅读
- python - Seaborn 图未显示在轴上
- python - 使用 BeautifulSoup 进行基本 Python 网页抓取
- ios - 实时更新 UserDefaults 更改
- python-3.x - Numpy install Broken toolchain:无法链接简单的C程序
- azure - Azure AD B2C 是否将元数据终结点公开为 WS-Federation 依赖方?
- python - scipy 优化最接近初始猜测的解决方案
- r - 如何将ggplots的列表列打印到pdf?
- php - 如何从按钮提交数据
- linux - 使用 bash 脚本在 Linux 上增加路径
- highcharts - Highstock MACD 研究使用 sma 而不是 ema