swiper实现匀速无缝轮播-公告无缝滚动

为了实现公告无缝滚动，可以使用Swiper的loop模式，并确保有足够的复制项来实现无缝滚动。以下是一个简单的实现示例：

HTML:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 复制公告条目以实现无缝滚动 -->
    <div class="swiper-slide">公告1</div>
    <div class="swiper-slide">公告2 (这是复制的第一条公告)</div>
    ...
    <div class="swiper-slide">公告N (这是复制的最后一条公告)</div>
    <div class="swiper-slide">公告1</div>
    <!-- 结束复制 -->
  </div>
  <!-- 如果你需要分页器 -->
  <div class="swiper-pagination"></div>
  
  <!-- 如果你需要导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
 
  <!-- 如果你需要滚动条 -->
  <div class="swiper-scrollbar"></div>
</div>

CSS:

.swiper-container {
  width: 300px; /* 设置公告栏的宽度 */
  height: 50px; /* 设置公告栏的高度 */
  margin: auto; /* 居中显示 */
}
 
.swiper-slide {
  /* 设置公告的样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  height: 50px; /* 与.swiper-container的高度一致 */
}

JavaScript:

var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical', // 垂直滚动
  loop: true, // 开启无缝滚动
  autoplay: {
    delay: 3000, // 自动播放的间隔时间
  },
  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  
  // 如果需要导航按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  // 如果需要滚动条
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  
  // 确保无缝滚动的适配
  on: {
    init: function() {
      const activeIndex = this.activeIndex;
      this.slideTo(activeIndex + 1, 0, false);
      this.slideTo(activeIndex - 1, 0, false);
    },
    transitionEnd: function() {
      const activeIndex = this.activeIndex;
      if (this.isBeginning) {
        this.slideTo(this.slides.length - 3, 0, false);
      } else if (this.isEnd) {
        this.slideTo(1, 0, false);
      }
    }
  }
});

确保在Swiper的配置中开启loop模式，并在初始化时调整slides的位置，以实现平滑的无缝滚动。