如何在react中隐藏特定幻灯片的滑动分页?

Question

我的页面中有大约10张幻灯片，它是使用react swiper完成的。因此，我需要隐藏幻灯片1和10的分页(在本例中我使用了项目符号)。有没有一种方法来隐藏那些使用js在反应?

Answer 1

一个解决方案

使用swiper API:

1/2。通过索引检测特定幻灯片:

到thisslideindex为零，例如(first slide)由realIndex &slideChange事件，然后做一些事情:

swiper.on('paginationUpdate', function () {
let realIndex = this.realIndex;
if(realIndex == 0){
console.log("hello first slide");
}
});

2/2。通过API销毁/初始化分页

swiper.pagination.init ()

swiper.pagination.destroy ()

swiper.on('slideChange', function () {
let realIndex = this.realIndex;
if(realIndex == 0){
/* Destroy pagination if slide is 1 */
this.pagination.destroy();
}else{
/* Initialize pagination */
this.pagination.init();     
}
});

演示示例(* *在HTML,但使用的想法/概念偷窃者反应):

const swiper = new Swiper('.swiper', {
// Optional parameters
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
console.log('swiper initialized');
/* hide pagination on load */
this.pagination.destroy();
}
},
});
swiper.on('paginationUpdate', function () {
let realIndex = this.realIndex;
if(realIndex == 0){
/* hide pagination if slide is 1 */
this.pagination.destroy();
}else{
/* else show */
this.pagination.init();     
}
});

html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}

<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1 - Hide pagination</div>
<div class="swiper-slide">Slide 2 - Show pagination</div>
<div class="swiper-slide">Slide 3 - Show pagination</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>