我在 Next.JS 开发的项目中使用滑块滑动器,并且使用 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;
}
我已经尝试更改样式,但没有反映在组件上。如果我通过浏览器更改样式,它可以正常工作。
更改基本的箭头样式非常简单 - 看看下面的代码框: 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