大疆首页轮播图 双向控制

如果你想实现大疆首页轮播图双向控制，即可以通过点击上一张或下一张按钮来切换轮播图，也可以通过手动滑动轮播图来切换轮播图，可以按照以下步骤来实现：

1. 在 JS 中初始化 `swiper`。

const swiper = new Swiper('.swiper-container', {
  loop: true, // 开启循环模式
  autoplay: {
    delay: 5000, // 自动播放间隔时间
    disableOnInteraction: false // 当用户滑动时是否停止自动播放
  },
  pagination: {
    el: '.swiper-pagination', // 分页器容器
    clickable: true // 是否允许点击分页器切换图片
  },
  navigation: {
    nextEl: '.swiper-button-next', // 下一张按钮
    prevEl: '.swiper-button-prev' // 上一张按钮
  },
  on: {
    slideChangeTransitionEnd: function () {
      // 获取当前激活的轮播图索引
      const activeIndex = this.activeIndex;
      // 更新上一张和下一张按钮的 data-slide 属性值
      const prevButton = document.querySelector('.swiper-button-prev');
      const nextButton = document.querySelector('.swiper-button-next');
      prevButton.setAttribute('data-slide', activeIndex === 0 ? this.slides.length - 1 : activeIndex - 1);
      nextButton.setAttribute('data-slide', activeIndex === this.slides.length - 1 ? 0 : activeIndex + 1);
    }
  }
});

2. 在 CSS 中添加上一张和下一张按钮的样式。

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
}

.swiper-button-prev {
  left: 20px;
}

.swiper-button-next {
  right: 20px;
}

3. 在 HTML 中添加上一张和下一张按钮，并设置初始的 `data-slide` 属性值。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- swiper slides -->
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev" data-slide="2">&lt;</div>
  <div class="swiper-button-next" data-slide="1">&gt;</div>
</div>

4. 在 JS 中添加上一张和下一张按钮的点击事件，通过 `slideTo` 方法切换轮播图。

const prevButton = document.querySelector('.swiper-button-prev');
const nextButton = document.querySelector('.swiper-button-next');

prevButton.addEventListener('click', function () {
  const slide = this.getAttribute('data-slide');
  swiper.slideTo(slide);
});

nextButton.addEventListener('click', function () {
  const slide = this.getAttribute('data-slide');
  swiper.slideTo(slide);
});

这样，就可以通过点击上一张或下一张按钮来切换轮播图，也可以通过手动滑动轮播图来切换轮播图了。