如何在反应中隐藏特定幻灯片的滑动分页？答案

【问题标题】：How do I hide the swiper pagination for specific slides in react?如何在反应中隐藏特定幻灯片的滑动分页？
【发布时间】：2021-10-02 20:03:26
【问题描述】：

我的页面中有大约 10 张幻灯片，它是使用 react swiper 完成的。所以我需要为幻灯片 1 和 10 隐藏分页（在我的情况下我使用了项目符号）。有没有办法在 react 中隐藏使用 js 的那些？

【问题讨论】：

您能否提供指向您正在使用的确切组件的链接？这将非常有帮助。此外，共享您当前的源代码以初始化 swiper 将帮助人们更快、更彻底地回答。谢谢！

标签： javascript reactjs pagination swiper swiperjs

【解决方案1】：

一个解决方案。

使用swiper API:

1/2。按索引检测特定幻灯片：

检测 if this slide index 为零，例如 (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 中 - 但使用 Swiper React 的想法/概念）：

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>

【讨论】：