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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css" rel="external nofollow" >
<script src="/UploadFiles/2021-04-02/swiper.min.js">

2、html部分：


<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ab natus quae incidunt a officiis excepturi alias sit repellendus debitis"swiper-slide">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati laudantium dolores suscipit laboriosam vitae corporis alias architecto voluptas aperiam consectetur nisi vero voluptates sed nobis assumenda doloremque officiis asperiores dolorem! Cupiditate autem magnam aliquam velit necessitatibus fugiat nihil aperiam cumque eum soluta"swiper-slide">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem doloribus quaerat minus facere aut vel fugit saepe vero voluptatum voluptatem alias nobis doloremque eum praesentium temporibus error pariatur dolore molestias itaque corporis voluptatibus atque perferendis dolorum eius quam nostrum sint quis! Cum rem hic eos laboriosam ipsam illum nam porro. Inventore autem facere vel aut facilis cupiditate tempore neque omnis architecto et. Facere quis sequi accusantium natus quibusdam quaerat quos aut. Repudiandae ullam sunt asperiores in nulla corporis amet itaque delectus sequi necessitatibus perferendis voluptatibus et quidem"swiper-slide">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur inventore facere amet vitae soluta cupiditate ullam ab blanditiis iusto odit. Velit fuga cum quam vel molestias minus ut repellat officiis hic quo magni quasi eligendi consequuntur recusandae magnam ad voluptatum sunt perspiciatis officia in nihil fugiat repudiandae ullam a corrupti sed voluptatem error distinctio sequi quisquam delectus impedit soluta ipsum natus suscipit ex placeat autem dolorum illo eaque veritatis explicabo quidem totam aperiam ducimus tempore cupiditate unde mollitia quos corporis. Earum ipsa consectetur sapiente autem cum delectus ipsam omnis magnam repudiandae ea modi officiis architecto quos repellendus aspernatur nobis similique. Facilis ut voluptatum voluptatibus quod dolorem illo et aperiam molestiae adipisci ab minima quas nam iure vel nemo porro eos"swiper-slide">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam vero enim expedita autem deserunt quas odit sunt neque suscipit ipsum temporibus aspernatur molestiae minima maxime nam aperiam et voluptatum soluta sed esse officia quo quia nulla omnis ad tempora error. Nobis porro doloremque voluptatibus repudiandae tempore mollitia sed et in nostrum adipisci optio enim quas. Quas tenetur in vero repellendus inventore ipsam cumque itaque labore laboriosam libero sunt enim sequi provident numquam minima neque eveniet cupiditate magnam non nemo rem expedita et quasi iste fuga unde molestias excepturi soluta nisi vel consectetur delectus consequatur est. Quisquam sint ipsa inventore magnam dolores in eaque nulla alias cum quas incidunt vel a sit quidem minus pariatur asperiores distinctio minima quam veritatis cupiditate illum similique eveniet velit accusamus ratione adipisci vero quasi et aperiam praesentium nihil amet corrupti neque dolore facilis nemo ipsam! Modi id odit recusandae similique iusto officia suscipit at explicabo reprehenderit repudiandae maxime veniam quisquam natus delectus amet voluptatibus temporibus quis vitae harum eos. Vero reiciendis nobis facere voluptatem quisquam deserunt beatae accusamus laborum illo blanditiis maiores rem voluptatibus cupiditate eos odio odit esse suscipit iure aliquam dignissimos sint nihil cumque dolorum impedit possimus ipsa sapiente numquam recusandae quae. Tempore quibusdam vero qui sed placeat natus nobis ex neque modi totam sit esse corporis quia officiis nulla similique voluptas aperiam quaerat magnam ad. Dignissimos voluptates inventore quia laboriosam. Blanditiis illo dolorum libero porro veniam maxime excepturi delectus pariatur doloremque unde. Quasi reprehenderit eligendi ut nobis soluta possimus enim! Esse magnam doloribus minus et repellendus eligendi eum enim odio mollitia rem porro rerum in dicta tempore ipsa quae aperiam deserunt quaerat ex deleniti voluptas consectetur ab tenetur culpa nostrum eaque alias vitae quibusdam commodi impedit neque exercitationem natus inventore laborum dolorem hic eos beatae voluptatum atque quis aspernatur temporibus. Veniam incidunt rerum voluptates laborum nobis maxime quisquam ad sed minima a ratione repellendus est quibusdam rem nisi aliquam velit saepe cupiditate recusandae error vitae fuga nam esse illo nostrum tenetur fugit sapiente. Accusantium assumenda quia ad soluta deleniti sed dolores reiciendis explicabo iste aperiam saepe eum architecto quo ratione atque id obcaecati ipsam voluptas molestias aut natus fugit consectetur quas"swiper-scrollbar"></div>
    </div>




注意这个‘.swiper-scrollbar'不要漏了，他是滚动条。
另外这个文本内容是随机英文，快捷方式是lorem+数字，按tab健。
3、css部分：


html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
  cursor: default;
}
.swiper-slide {
  font-size: 20px;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  line-height: 2;
  text-indent: 2em;
}




4、js部分：


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




swiper的自由模式，允许滑动组件不必贴合边缘，freeModeMomentumRatio是移动惯量，单位为s，值越大，松开后滑动越久，设置false可关闭。
感兴趣的朋友还可以使用本站如下在线工具测试运行效果：
在线HTML/CSS/JavaScript前端代码调试运行工具：

http://tools.jb51.net/code/WebCodeRun
在线HTML/CSS/JavaScript代码运行工具：

http://tools.jb51.net/code/HtmlJsRun
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript文件与目录操作技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。