无法调整划扫器.js导航箭头的大小

Question

我有一个滑动器，但是由于某些原因不能调整导航箭头的大小。

.swiper-button-next,
.swiper-button-prev {
color: white !important;
fill: white !important;
stroke: white !important;
width: 10px !important;
height: 10px !important;
}

无论我给出什么值，箭头都保持不变。

Answer 1

一个简单而直接的解决方案是删除默认箭头并使用自定义箭头。为此，您需要:

.swiper-button-prev:after,
.swiper-button-next:after {
display: none;
}

然后为每个控制器添加一个图标，如下所示

<div class="swiper-button-next">Custom</div>
<div class="swiper-button-prev">Custom</div>

这里是一个工作的现场演示，让你了解一个想法:

var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});

html,
body {
height: 100%;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
display: grid;
place-items:center;
}

.swiper-button-prev:after,
.swiper-button-next:after {
display: none;
}
i{
color:crimson;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"><i class="fa-solid fa-circle-chevron-right fa-2x"></i></div>
<div class="swiper-button-prev"><i class="fa-solid fa-circle-chevron-left fa-2x"></i></div>
</div>