当特定方向上没有更多图像时，隐藏滑动器js导航按钮(左和右)

Question

当的特定方向上没有更多图像时，我如何隐藏滑动器js导航按钮(左和右(

例如。如果在正确的方向上没有图像，则右侧导航按钮应被隐藏。

Answer 1

我发现了一个使用CSS 的简单解决方案

.swiper-button-disabled{
display:none;   
}

当该方向上没有图像时，这将自动隐藏该方向的导航按钮。

Answer 2

如果你想用渐变效果隐藏它，你可以简单地这样做：

.swiper-button-next, .swiper-button-prev {
opacity: 1;
transition: 0.5s ease-in-out;
}

.swiper-button-disabled {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
}

Answer 3

使用jQuery，您可以执行以下操作：

if (swiper.activeIndex===0) {
$('.left-slide').hide()
$('.right-slide').show()
} else if (swiper.activeIndex === swiper.slides.length-1) {
$('.left-slide').show()
$('.right-slide').hide()
}

第一个条件是第一张幻灯片

Answer 4

如前所述，您可以通过将样式添加到.swiper按钮禁用的默认类中来完成

&.leftIcon, &.rightIcon, &.topIcon, &.bottomIcon{
opacity: 1;
visibility: visible;
transition: all 0.4s ease;
&.swiper-button-disabled {
opacity: 0;
visibility: hidden;
}
}

在React 中使用Swiper

如果你想做一些额外的事情，比如隐藏渐变效果，你可以使用onActiveIndexChange道具。e参数具有isBeginning和isEnd布尔值，如果您处于转盘的开始或结束位置，则返回true。

const [disableFading, setDisableFading] = React.useState<'isBeginning'|'isEnd'|null>('isBeginning');
<Swiper
className={`swiperComponent ${disableFading === "isEnd" ? 'disabledFading' : ''}`}
onActiveIndexChange={(e) => {
if(e.isBeginning){
setDisableFading("isBeginning");
} else if(e.isEnd){
setDisableFading("isEnd");
} else {
setDisableFading(null)
}
}}
/>