VsCarousel

<!-- 请设置轮播图容器的高度 -->
<div id="vsCarousel" class="vsCarousel">
  <!-- 轮播图元素列表 -->
  <ul class="vsCarousel-wrapper">
    <li class="vsCarousel-slide"><img src="https://unsplash.it/1920/500/?image=7" alt="1"></li>
    <li class="vsCarousel-slide"><img src="https://unsplash.it/1920/500/?image=8" alt="2"></li>
    <li class="vsCarousel-slide"><img src="https://unsplash.it/1920/500/?image=9" alt="3"></li>
  </ul>
  <!-- 分页器 -->
  <div class="vsCarousel-page">
    <button class="vsCarousel-page-play"></button>
    <button class="vsCarousel-page-button" data-index="1"></button>
    <button class="vsCarousel-page-button" data-index="2"></button>
    <button class="vsCarousel-page-button" data-index="3"></button>
  </div>
</div>
<script>
  let vsCarousel = new VsCarousel('vsCarousel', {
    effect: 'fade',
    pege: 'center'
  });
</script>

<!-- 请设置轮播图容器的高度 -->
<div id="vsCarousel2" class="vsCarousel">
  <!-- 轮播图元素列表 -->
  <ul class="vsCarousel-wrapper">
    <li class="vsCarousel-slide"><img src="https://unsplash.it/1920/500/?image=7" alt="1"></li>
    <li class="vsCarousel-slide"><img src="https://unsplash.it/1920/500/?image=8" alt="2"></li>
    <li class="vsCarousel-slide"><img src="https://unsplash.it/1920/500/?image=9" alt="3"></li>
  </ul>
  <!-- 前进后退按钮 -->
  <div class="vsCarousel-button">
    <button class="vsCarousel-button-prev"></button>
    <button class="vsCarousel-button-next"></button>
  </div>
  <!-- 分页器 -->
  <div class="vsCarousel-page">
    <button class="vsCarousel-page-play"></button>
    <button class="vsCarousel-page-button" data-index="1"></button>
    <button class="vsCarousel-page-button" data-index="2"></button>
    <button class="vsCarousel-page-button" data-index="3"></button>
  </div>
</div>
<script>
  let vsCarousel = new VsCarousel('vsCarousel2');
</script>

简介

1. 请设置轮播图容器的高度。

2. 如果未设置宽度时，轮播图会根据外部容器自适应宽度。

3. 测试环境 Chrome 版本 84.0.4147.135（正式版本）（64 位）

默认配置

let vsCarousel = new VsCarousel('vsCarousel', { // 生效dom的id。
  effect: 'slide|fade', // 切换效果，滑动或渐变。
  bar: true, // 是否显示分页器上的进度条。
  pege: 'right|left|center', // 分页器位置。
  autoPlay: true // 是否自动切换。
  time: 5, // 自动切换停留时间。
});