swiper.js插件实现pc端文本上下滑动功能示例

首先，Swiper.js是一个基于jQuery的非常流行的移动端原生js滑动插件，主要用于实现轮播图等移动端滑动交互场景。

但是，Swiper.js插件同样支持PC端文本上下滑动功能，下面我们来讲解如何使用它来实现这一功能。

1.引入Swiper.js文件
要使用Swiper.js插件，首先需要在页面中引入Swiper的js和css文件，这两个文件可以通过cdn或本地下载的方式获取。

<!-- 引入Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

<!-- 引入Swiper CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">

2.HTML布局
接下来，在HTML页面中我们需要创建一个容器元素，并为其设置宽度、高度以及相对定位等CSS样式。

<div 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 class="swiper-slide">Slide 4</div>
  </div>
</div>

3.初始化Swiper
之后，在JavaScript中调用Swiper构造函数，传入容器元素的选择器，以及一些配置项来初始化Swiper。

var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  slidesPerView: 'auto',
  mousewheel: true,
  freeMode: true
});

其中，direction选项用来设置滑动方向，这里我们将其设置为垂直方向；slidesPerView选项设置每屏显示个数，这里我们将其设置为auto，表示自动适应父元素宽度；mousewheel选项用来启用鼠标滚轮滑动功能；freeMode选项表示滑动不会自动贴合屏幕边缘。

示例1：自动轮播
另外，Swiper.js还提供了自动轮播功能，可以通过autoplay选项设置自动轮播的时间间隔。

var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  slidesPerView: 'auto',
  mousewheel: true,
  freeMode: true,
  autoplay: {
    delay: 3000, // 单位ms
    disableOnInteraction: false, // 用户操作之后是否禁止自动轮播
  },
});

示例2：循环滚动
另外，Swiper.js还支持循环滚动功能，可以通过loop选项来实现。

var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  slidesPerView: 'auto',
  mousewheel: true,
  freeMode: true,
  loop: true
});

以上就是使用Swiper.js插件实现PC端文本上下滑动功能的攻略了，可以根据自己的需求设置不同的配置项来满足不同的应用场景。