swiper组件滚动条

Swiper组件是一个常用的轮播图组件，在滚动时可以出现滚动条。要在Swiper组件中添加滚动条，可以使用Swiper的参数`scrollbar`。具体步骤如下：

1. 导入Swiper的样式文件和脚本文件到你的项目中：

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2. 在HTML中创建一个容器元素，并设置一个唯一的ID：

<div id="swiper-container" class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 添加轮播项 -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- 添加滚动条 -->
  <div class="swiper-scrollbar"></div>
</div>

3. 在JavaScript中初始化Swiper实例，并指定滚动条参数：

var swiper = new Swiper('#swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    hide: false,
  },
});

这样，就可以在Swiper组件中添加滚动条了。