如何在 React 中隐藏特定幻灯片的刷卡分页？

Question

我的页面中有大约 10 张幻灯片，它们是使用 React Swiper 完成的。所以我需要隐藏幻灯片 1 和 10 的分页（在我的例子中，我使用了项目符号）。有没有办法隐藏那些在反应中使用 js 的内容？

Answer 1

一个解决方案。

使用swiper API:

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

检测if this 幻灯片 index 为零例如 (first slide) by realIndex & slideChange 事件比做某事：

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

2/2。 Destroy/Init 分页 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 使用 idea/concept：

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>

如何在 React 中隐藏特定幻灯片的刷卡分页？

How do I hide the swiper pagination for specific slides in react?

javascript

reactjs

pagination

swiper

swiperjs