如何解决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
解决方法
我在 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);
z-index: 10;
top: 0 !important;
}
我遇到了同样的问题,我解决的方法是:
导入语句
// 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;
}
}
如果有人找到更好的解决方案,请告诉我!
, /* 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。