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

效果

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/151697.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一个前端非侵入式骨架屏自动生成方案

目录 背景 现有方案调研 侵入业务式手写代码 非侵入业务式手写代码 非侵入式骨架屏代码自动生成 技术方案 设计原则 架构图 骨架屏生成 骨架屏注入 优化点 部分技术细节解析 puppeteer 文本块处理 图片块处理 a 标签处理 自定义属性处理 首屏HTML处理 首屏样…

合肥数字孪生赋能工业制造,加速推进制造业数字化转型

聚焦国家战略需求和先进制造业发展方向&#xff0c;加快数字化发展战略部署&#xff0c;数字孪生、工业互联网、工业物联网已被广泛认为是工业革命的新引擎。合肥数字孪生正在推动工业制造从制造转向智造。通过数字化建模和仿真的方式&#xff0c;优化设计、生产、质量管理、供…

使用 Gradle 命令了解项目构建信息

引言 首先&#xff0c;Gradle 作为使用 Android Studio 开发 Android 项目的默认构建工具&#xff0c;它里面的任何东西都基于两个概念&#xff1a; projects ( 项目 )tasks ( 任务 ) 每一个构建由一个或多个 projects 构成&#xff0c;每一个 project 由一个或多个 tasks 构…

SOLIDWORKS功能布局实用技巧之保存实体技术

在SOLIDWORKS软件中&#xff0c;有一些命令可以将一个或多个实体保存为独立的零件文件。然而&#xff0c;每个命令都具有不同的特性&#xff0c;有些命令的选项可以让您在保存多个零件时直接生成装配体文件。让我们来深入了解这些功能布局技巧&#xff0c;特别是实体保存技术。…

XXX系统测试报告测试用例模板

XXX系统测试报告 编制&#xff1a; 2023-5-16 审核&#xff1a; 日期&#xff1a; 批准&#xff1a; 日期&#xff1a; 版本 修订时间 修订人 修订类型 修订章节 修订内容 *修订类型分为 A …

如何解决3d max渲染效果图全白这类异常问题?

通过3d max渲染效果图时&#xff0c;经常会出现3Dmax渲染效果图全黑或是3Dmax渲染效果图全白这类异常问题。可能遇到这类问题较多的都是新手朋友。不知如何解决。 3dmax渲染出现异常的问题&#xff0c;该如何高效解决呢&#xff1f;今天小编这里整理几项知识点&#xff0c;大家…

力扣刷题篇之数与位1

系列文章目录 目录 系列文章目录 前言 一、进制转换 总结 前言 本系列是个人力扣刷题汇总&#xff0c;本文是数与位。刷题顺序按照[力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 - 力扣&#xff08;LeetCode&#xff09; 一、进制转换 67. 二进制求和 - 力扣&…

二十、泛型(8)

本章概要 潜在的类型机制 pyhton 中的潜在类型C 中的潜在类型Go 中的潜在类型java 中的直接潜在类型 潜在类型机制 在本章的开头介绍过这样的思想&#xff0c;即要编写能够尽可能广泛地应用的代码。为了实现这一点&#xff0c;我们需要各种途径来放松对我们的代码将要作用的…

Leetcode周赛371补题(3 / 3)

目录 1、找出强数对的最大异或值 - 暴力 2、高访问员工 - 哈希表 模拟 3、最大化数组末位元素的最少操作次数 - 思维 贪心 1、找出强数对的最大异或值 - 暴力 找出强数对的最大异或值 I class Solution {public int maximumStrongPairXor(int[] a) {int na.length,max0;…

VS Code如何使用服务器的Python开发环境

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

写作脑科学——屠龙的高效写作指南

ISBN: 978-7-115-59231-6 作者&#xff1a;杨滢&#xff08;屠龙的胭脂井&#xff09; 页数&#xff1a;201页 阅读时间&#xff1a;2023-09-09 推荐指数&#xff1a;★★★★★ 十分推荐这本书&#xff0c;写的非常简单易懂&#xff0c;里面有很多方法论和实用技巧&#xff0c…

X86 bios 中断大全

1、显示服务(Video Service——INT 10H) 00H —设置显示器模式 0CH —写图形象素 01H —设置光标形状 0DH —读图形象素 02H —设置光标位置 0EH —在Teletype模式下显示字符 03H —读取光标信息 0FH —读取显示器模式 04H —读取光笔位置 10H —颜色…

【LeetCode刷题-滑动窗口】--1658.将x减到0的最小操作数

1658.将x减到0的最小操作数 思路与算法&#xff1a; 根据题目描述&#xff0c;在每一次操作中&#xff0c;可以移除数组nums最左边和最右边的元素&#xff0c;因此&#xff0c;在所有的操作完成后&#xff0c;数组nums的一个前缀以及一个后缀被移除&#xff0c;并且它们的和恰…

CopyOnWriteArrayList 源码详解

目录 一. 前言 二. 源码详解 2.1. 类结构 2.2. 属性 2.3. 构造方法 2.4. add(E e) 2.5. add(int index, E element) 2.6. addIfAbsent() 方法 2.7. 获取元素() 方法 2.8. remove(int index) 2.9. size() 三. FAQ 3.1. 为什么CopyOnWriteArrayList没有size属性&…

架构师的成名之路

相信大家都对未来的职业发展有着憧憬和规划&#xff0c;要做架构师、要做技术总监、要做CTO。对于如何实现自己的职业规划也都信心满满&#xff0c;努力工作、好好学习、不断提升自己。 相信成为一名优秀的架构师是很多程序员的目标&#xff0c;架构师的工作包罗万象&#xff…

3.3 Windows驱动开发:内核MDL读写进程内存

MDL内存读写是一种通过创建MDL结构体来实现跨进程内存读写的方式。在Windows操作系统中&#xff0c;每个进程都有自己独立的虚拟地址空间&#xff0c;不同进程之间的内存空间是隔离的。因此&#xff0c;要在一个进程中读取或写入另一个进程的内存数据&#xff0c;需要先将目标进…

基于SSM的校园服务平台管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

C++初阶,详解类和对象(2)

详解类和对象&#xff08;2&#xff09; 一&#xff0c;前言二&#xff0c;构造函数2.1构造函数概念2.2构造函数特性 三&#xff0c;析构函数3.1析构函数概念3.2析构函数特性 一&#xff0c;前言 上一篇我们讲了类的大体框架&#xff0c;这篇内容我们要重点来说一说类的几个默…

【Vue】内置指令真的很常用!

内置指令 v-text v-text用于将一个变量的值渲染为元素的文本内容 注意v-text只能接受字符串类型的值,对于对象类型,会调用toString()方法 与插值表达式区别就是它会替换标签中的值&#xff0c;只显示它绑定的&#xff08;还是插值语法用的多~&#xff09; 语法 <元素 …

普源DS1052E固件升级【附所有升级固件及工具】

折腾了两天&#xff0c;总算是弄好了。 升级的目的是啥&#xff1f;DS1052E的带宽是50M&#xff0c;示波器的时基最小可以调到5ns。固件升级后示波器的时基最小可以调到2ns&#xff0c;理论上说明此时示波器的带宽是100M。 网上的方法能找到很多&#xff0c;我总结一下大概的流…