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

Question

我有大约10个幻灯片在我的页面，它是完成使用反应刷。因此，我需要分页(在我的例子中，我使用了子弹)来隐藏幻灯片1和10。有办法隐藏那些使用js的人吗？

Answer 1

一种解决办法。

使用swiper API

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

通过& slideChange事件检测 this幻灯片索引为0 (first slide)，而不是做一些事情：

  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>

​