swiper给分页器加滚动条

你可以使用 Swiper 的 scrollbar 参数来给分页器添加滚动条。以下是一个示例：

var swiper = new Swiper('.swiper-container', {
  // 设置分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  // 设置滚动条
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

在上面的示例中，你需要在 HTML 中添加一个具有 `.swiper-container` 类的元素作为 Swiper 的容器，并在其中包含一个具有 `.swiper-pagination` 类的元素作为分页器，以及一个具有 `.swiper-scrollbar` 类的元素作为滚动条。然后，通过 JavaScript 创建一个 Swiper 实例，并在参数中指定分页器和滚动条的配置。

希望这能帮到你！如果你有任何其他问题，请随时问我。

相关问题

vue-awesome-swiper上下滚动

以下是使用vue-awesome-swiper实现上下滚动的方法：

1.首先安装swiper和vue-awesome-swiper插件：

npm install swiper@4.5.1 vue-awesome-swiper@3.1.3 --save

2.在需要使用的组件中引入swiper和vue-awesome-swiper：

import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

3.在组件中使用swiper和vue-awesome-swiper：

<template>
  <div class="swiper-container" ref="mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in list" :key="index">{{ item }}</div>
    </div>
    <div class="swiper-pagination" slot="pagination"></div>
  </div>
</template>

<script>
export default {
  components: {
    swiper,    swiperSlide
  },
  data() {
    return {
      list: ['第一条公告', '第二条公告', '第三条公告', '第四条公告', '第五条公告']
    }
  },
  mounted() {
    this.$nextTick(() => {
      new this.$swiper(this.$refs.mySwiper, {
        direction: 'vertical',
        autoplay: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      })
    })
  }
}
</script>

<style>
.swiper-container {
  height: 200px;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.swiper-pagination-bullet-active {
  background-color: #fff;
}
</style>

4.在上面的代码中，我们使用了swiper的direction属性来设置滚动方向为垂直方向，同时使用了autoplay和loop属性来实现自动播放和循环播放。我们还使用了pagination属性来添加分页器，使用户可以手动切换公告。

swiper全屏滚动的属性

1. direction：滚动方向，可选值为"horizontal"（水平方向）和"vertical"（垂直方向）。
2. loop：是否循环滚动，默认为false。
3. speed：滚动速度，单位为毫秒，默认为300。
4. autoplay：是否自动播放，默认为false。
5. autoplayDelay：自动播放延迟时间，单位为毫秒，默认为0。
6. pagination：是否显示分页器，默认为false。
7. navigation：是否显示左右箭头导航，默认为false。
8. scrollbar：是否显示滚动条，默认为false。
9. mousewheel：是否支持鼠标滚轮滚动，默认为false。
10. keyboard：是否支持键盘控制滚动，默认为false。
11. on：事件监听函数，可监听的事件包括init（初始化）、slideChange（滚动切换）、slideChangeTransitionEnd（滚动切换结束）等。