我在Next.JS开发的一个项目中使用了slider swiper,并使用Sass来设置样式。但是当我按照文档的要求使用swiper类来设置箭头的样式时,它不起作用。
我需要箭头位于组件外部,而不是重叠。
CSS系统
.swiper-button-next,
.swiper-button-prev {
background: red;
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-next:after,
.swiper-button-prev:after {
background: red;
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 10px;
right: auto;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
content: "prev";
color: #000;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 10px;
left: auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
content: "next";
}
.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {
--swiper-navigation-color: #ffffff;
}
.swiper-button-next.swiper-button-black,
.swiper-button-prev.swiper-button-black {
--swiper-navigation-color: #000000;
}
.swiper-button-lock {
display: none;
}
我试过更改样式,但是组件上没有任何React。如果我通过浏览器更改样式,它可以正常工作。
3条答案
按热度按时间vd8tlhqk1#
更改基本的箭头样式非常简单-请查看以下代码和框:https://codesandbox.io/s/stoic-shaw-q35wq?file=/src/styles.scss
但是,将箭头移到外部有点麻烦。在上面的示例中,我使用了一些CSS技巧(负边距和相应的填充)和一些溢出来使其工作,但这可能不足以满足您的用例。
您必须创建自己的下一个/上一个元素:
完整示例-https://codesandbox.io/s/prod-darkness-o483y?file=/src/App.js
重要-示例使用Swiper v7
vwkv1x7d2#
以下是添加自定义箭头的最佳方法:
c6ubokkw3#
hamza liaqat的答案是正确的,但对于打印脚本,您需要添加