swiper实现pc端文本上下滑动

在网站上看小说,文本太长时,靠鼠标去拖动滚动条太麻烦,鼠标滚轮又不精确,滚一下就不知道跑到哪去了。能不能像移动端那样可以鼠标上下滑动呢?swiper可以完美解决这个问题。
1、首先当然是引入swiper文件了:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script>

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? Inventore dolorum atque quibusdam hic doloribus dignissimos ratione unde dolorem numquam quam illum nulla. Nesciunt culpa sit libero nemo at quisquam modi itaque quae doloremque laborum possimus ad distinctio voluptates eius quibusdam recusandae officia! Rerum quas iusto soluta dolores quaerat suscipit earum perspiciatis alias esse error consequatur dolorum incidunt excepturi perferendis ad minus amet cumque ipsum illum libero? Iure dolores fugiat labore totam nihil debitis cum minus animi molestias quae. Harum dolorem dolor repellendus culpa quibusdam adipisci dignissimos quas asperiores eveniet ea enim possimus animi in architecto amet quisquam officia eius est provident numquam nesciunt dolorum a ratione labore voluptas totam corporis quae. Tempore mollitia saepe rem temporibus ex rerum dicta assumenda tempora asperiores at dolor sequi harum est nesciunt officiis itaque sint facere maiores nobis molestias cupiditate labore explicabo ipsa animi voluptates porro fuga iste dolores dolorem quod repudiandae a doloremque quam aliquid fugiat atque perferendis distinctio non aut reprehenderit. Eius commodi deserunt aperiam deleniti laudantium esse maiores adipisci consectetur. Saepe hic repellendus cumque quam dicta aperiam ipsam dolore nesciunt consequatur maxime deleniti deserunt laboriosam nostrum harum asperiores obcaecati sequi odio ipsum eius sint! Repudiandae a rem commodi quam sit illo nam quae. Ipsa cupiditate ipsum impedit consequatur unde dolores quibusdam veniam itaque ab cumque odit deleniti? Minus modi expedita voluptatum incidunt eaque natus facere molestias debitis voluptatibus error libero voluptatem aperiam quam culpa quisquam eligendi perferendis ab fugit aliquid quibusdam soluta nam veniam eius repellat dolor architecto iste provident aliquam quas quo! Provident debitis ratione corporis harum tempora nobis neque? Mollitia debitis expedita nisi temporibus voluptas ratione accusamus repellendus cupiditate repellat nobis aliquid explicabo nam magni et maxime rem ipsa perspiciatis officiis dolore eligendi fugiat necessitatibus quibusdam nulla officia sint consequatur quia blanditiis laudantium eius facilis. Qui nam suscipit consectetur adipisci illum eum sequi in magni voluptatibus totam sint architecto libero soluta! Porro repellat fugit nisi dolorum voluptate! Ea ducimus molestias rem tempora laboriosam aut blanditiis perferendis amet libero quisquam nostrum porro accusamus placeat possimus at consequatur ipsam nam ab error repellendus necessitatibus consequuntur dolor excepturi ex provident. Ipsum veniam laboriosam repellendus reprehenderit dolorem similique voluptates praesentium quaerat atque consectetur eos excepturi neque debitis necessitatibus qui delectus natus quia beatae odio sint cumque possimus ab quae labore repellat iure obcaecati asperiores! Fuga alias impedit quasi quisquam assumenda earum molestias mollitia illo nobis iusto qui accusamus quidem modi tempora sequi iure optio vero dolorum obcaecati similique adipisci ad perspiciatis quaerat. Consequuntur tempora cupiditate quaerat ab voluptatem dolorum voluptatum et molestiae similique modi quod provident amet. Perspiciatis quaerat atque laudantium excepturi! Commodi recusandae ad ratione vitae harum nihil veritatis quasi fugiat animi laudantium placeat quam nesciunt provident at molestias tempore beatae incidunt. Vero repellat iste perspiciatis sit quae optio illo odit excepturi minima odio asperiores similique laboriosam illum fugit corrupti. Similique hic quis corrupti facere possimus minus magni necessitatibus quae nostr
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值