swiper垂直方向全屏实现鼠标滚轮滚动一下切换一屏

以对_

于 2023-11-16 09:28:50 发布

阅读量924

点赞数

分类专栏： css js 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_44161722/article/details/134434116

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

效果

20231116092014

添加mousewheelControl: true,这个属性即可
在这里插入图片描述

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" > 
      <div class="" style="height: 100%; background-color: #ccc;">
        111
      </div>
    </div>
    <div class="swiper-slide">
      <div class="" style="height: 100%; background-color: #8b8b8b;">
        222
      </div>
    </div>
    <div class="swiper-slide">
      <div class="" style="height: 100%; background-color: #202020;">
        333
      </div>
    </div>
  </div>
</div>

<script>
  var mySwiper = new Swiper('.swiper-container', {
      speed: 1000,
      direction: 'vertical',
      height : window.innerHeight,
      mousewheelControl: true,
      forceToAxis: true,
  }) 
 </script>