React Swiper.js使用(详细版)3D聚焦特效,自定义导航按钮等

共用代码

import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'import { Navigation, Pagination, Scrollbar, A11y, Autoplay, EffectCreative } from 'swiper/modules';import { Swiper, SwiperSlide, } from 'swiper/react';

普通版本

重点:  modules={[Navigation, Pagination]}   Swiper, SwiperSlide  没什么好说的

 <SwiperclassName="house"lazy={true}modules={[Navigation, Pagination]}spaceBetween={60}slidesPerView={3}watchSlidesProgressnavigation={{nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',disabledClass: 'disable',}}pagination={{el: '.swiper-pagination-house',type: 'progressbar',}}>{data.map((item: any) => {return (<SwiperSlide key={item.id} style={{ width: 440 }}><div className={styles.bannerContainer_box}><img src={item.projectListPic} alt="暂无图片" width="360" height="360" loading="lazy" /><div className={styles.textContainer}><p className={styles.title}>{item.projectName}</p><p className={styles.detail}>{item.fullAddress}</p></div></div></SwiperSlide>)})}</Swiper>

自定义导航按钮 / 进度条 + 解决同一页面,多个swiper.js 导航切换按钮冲突问题

这里的重点是: 

1、 通过直接引入less文件 重新定义 swiper-button-prev等类 或 :global ,自定义导航按钮 / 进度条样式 

2、  防止冲突,swiper2-button-prev swiper-button-prev 通过在前端定义前缀,避免多个swiper.js使用 navigation={{  nextEl: '.swiper-button-next',


.swiper-pagination {bottom: 0px;top: unset;width: 120px;height: 11px;left: 50%;transform: translateX(-50%);z-index: 1000;color: antiquewhite;
}.swiper-button-prev {position: absolute;left: 0px;top: 50%;width: 50px;height: 50px;border-radius: 50%;background: linear-gradient(131deg, rgba(33, 75, 148, 0.62) 0%, #001335 107%);&::after {display: none;}&.disable {background: #D8D8D8;}
}.......

  <div className="swiper2-button-prev swiper-button-prev"><img src={leftArrow} alt="上一张" /></div>
<Swipernavigation={{nextEl: '.swiper2-button-next',prevEl: '.swiper2-button-prev',disabledClass: 'disable',}}pagination={{el: '.swiper-pagination-house',type: 'progressbar',}}
>
.......</Swiper><div className="swiper2-button-next swiper-button-next"><img src={rightArrow} alt="下一个" /></div>

3D聚焦特效版本

重点: 使用 creativeEffect= {{ ... }}   modules={[Autoplay, EffectCreative]}  effect={'creative'}

  <SwiperslidesPerView={3}loopedSlides={2}loop={true}watchSlidesProgress={true}centeredSlides={true}initialSlide={1}spaceBetween={-60}autoplay={{delay: 2500,disableOnInteraction: false,}}effect={'creative'}creativeEffect={{prev: {translate: [-396, 0, 0],scale: 0.9295,},next: {translate: [396, 0, 0],scale: 0.9295,},shadowPerProgress: true,}}modules={[Autoplay, EffectCreative]}>{mockModuleBannerData.map((item: any) => {return (<SwiperSlide key={item.id} style={{ width: 440 }}><img src={item.img} alt="暂无图片" width="440" height="440" /></SwiperSlide>)})}</Swiper>

获取swiper的实例

<SwiperclassName="swiperRe"lazy={true}modules={[Navigation, EffectCreative]}spaceBetween={32}slidesPerView={2}effect={'creative'}onProgress={onProgress}
......const onProgress = (swiper: any) => {// 原谅我的黑魔法,太过黑盒了,都不知道从哪里获取swiper的实例。// eslint-disable-next-line curlyif (ref.current) returnref.current = swiper}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Acwing167】木棒(dfs+剪枝)超级详细题解!

题目描述 统一说明 本题思路来源于acwing算法提高课 木棍指题目输入数据所指的东西 木棒指最后由木棍拼接而成的最长的东西 看本文需要准备的知识 1.dfs基本思想 2.对“剪枝”这个词汇有一个基本的认识即可 整体分析 这个题目最终是求木棒的最短长度&#xff0c;所以我…

c 读取音频协议WAV文件头(再生成wav文件)

查找wav文件头关键struct 位置&#xff0c;当然也可查找avi文件头。用这个方法找到avi文件data位置后&#xff0c;可直接读出文件的每一帧图片。当然avi数据的标志位不是data,可以是00dc等。 WAV音频头文件有三个关键struct&#xff1a;RIFF, fmt,data。 AVI 视频文件头的关键…

shell脚本的基础知识

目录 1.什么是shell 2.shell脚本的意义 3.如何创建shell脚本 4.如何执行shell脚本 5.如何对脚本进行测试 脚本练习 1.什么是shell Shell是一种命令行解释器&#xff0c;是用户与操作系统内核之间的接口&#xff0c;允许用户编辑和执行命令。它是用户输入命令并将其传递给操…

万能鼠标设置 SteerMouse v5.6.8

鼠标可谓是用户们在使用电脑时候的必备外接设备呢&#xff01;适合你自己的鼠标设置也绝对能够优化你的Mac使用体验&#xff01;想要更好的Mac体验就试试用Steermouse Mac版吧。它通过软件来自由设置你的鼠标操作&#xff01;在这款万能鼠标设置工具中&#xff0c;用户可以在偏…

Tuxera NTFS2024破解版本下载

当您获得一台新 Mac 时&#xff0c;它只能读取 Windows NTFS 格式的 USB 驱动器。要将文件添加、保存或写入您的 Mac&#xff0c;您需要一个附加的 NTFS 驱动程序。Tuxera 的 Microsoft NTFS for Mac 是一款易于使用的软件&#xff0c;可以在 Mac 上打开、编辑、复制、移动或删…

C - Minimize The Integer

思路&#xff1a; &#xff08;1&#xff09;注意到总体规律是奇数不能跨越奇数&#xff0c;偶数不能跨越偶数 &#xff08;2&#xff09;冒泡不可取&#xff1b; &#xff08;3&#xff09;直接队列分别存奇偶&#xff0c;小的往前放就行。 代码&#xff1a; #include<…

hdlbits系列verilog解答(模块按名字)-22

文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 此问题类似于模块。您将获得一个名为的 mod_a 模块&#xff0c;该模块按某种顺序具有 2 个输出和 4 个输入。您必须按名称将 6 个端口连接到顶级模块的端口&#xff1a; module mod_a ( output out1, output …

FPGA从入门到精通(二十)SignalTapII

这一篇将介绍SignalTapII。 之前的工程我们是做仿真&#xff0c;设置激励&#xff0c;观察输出波形去判断代码没有问题&#xff0c;但事实上我们真实的需求是综合后的代码下载到FPGA芯片中能够符合预期。 其中可能出现问题的原因有&#xff1a; 1、我们是写testbench设置激励…

五、W5100S/W5500+RP2040树莓派Pico<UDP Client数据回环测试>

文章目录 1. 前言2. 协议简介2.1 简述2.2 优点2.3 应用 3. WIZnet以太网芯片4. UDP Client回环测试4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 测试现象 5. 注意事项6. 相关链接 1. 前言 UDP是一种无连接的网络协议&#xff0c;它提供了一种简单的、不可靠的方式来…

软考高级系统架构师冲关预测

[ – 2023年10月27日 – ] 去年11月通过了软考高级系统架构师的考试&#xff0c;原本想立即分享下过关的总结回顾&#xff0c;但是随着软考新版大纲及教程的发布&#xff0c;也意味着题目及内容的复盘总结经验便不那么适用。在即将迎来今年的软考高架的时候&#xff0c;想着透…

构建客户门户的痛点及低代码工具解决方案

企业如何做好数字化转型呢&#xff1f; 如果笼统地说起“数字化转型”&#xff0c;这个概念太大了&#xff0c;它涉及到了企业管理中的方方面面。数字化转型是一个持续不断的过程&#xff0c;既要在整体上进行数字规划&#xff0c;也需要从细节入手&#xff0c;将每一个步骤进…

学习笔记:tarjan

tarjan 引入 Robert Tarjan&#xff0c;计算机科学家&#xff0c;以 LCA、强连通分量等算法而闻名。Tarjan 设计了求解的应用领域的广泛有效的算法和数据结构。他以在数据结构和图论上的开创性工作而闻名&#xff0c;他的一些著名的算法有 Tarjan 最近公共祖先离线算法&#…

一、高效构建Java应用:Maven入门和进阶

一、高效构建Java应用&#xff1a;Maven入门和进阶 目录 一、Maven简介和快速入门 1.1 Maven介绍1.2 Maven主要作用理解1.3 Maven安装和配置 二、基于IDEA的Maven工程创建 2.1梳理Maven工程GAVP属性2.2 Idea构建Maven JavaSE工程2.3 Idea构建Maven JavaEE工程2.4 Maven工程项…

Git Gui使用技巧

资料 https://www.runoob.com/w3cnote/git-gui-window.html 操作过程 创建仓库→添加远程仓库→扫描目录→文件移动→提交→上传 注意填注释 文件忽略 创建文件.gitignore→编写内容 *.log #文件 config.ini #文件 temp/ #目录

什么是恶意代码?

前言&#xff1a;本文旨在分享交流技术&#xff0c;在这里对恶意代码进行全面的介绍和讲解 目录 一.什么是恶意代码 二.恶意代码的发展史 三.恶意代码的相关定义 四.恶意代码攻击机制 PE病毒 PE文件的格式 脚本病毒 脚本文件隐藏方法 宏病毒 浏览器恶意代码 U盘病毒 …

优化改进YOLOv5算法:加入ODConv+ConvNeXt提升小目标检测能力——(超详细)

为了提升无人机视角下目标检测效果,基于YOLOv5算法,在YOLOv5主干中实现了Omnidimensional Convolution(ODConv),以在不增加网络宽度和深度的情况下提高精度,还在YOLOv5骨干网中用ConvNeXt块替换了原始的C3块,以加快检测速度。 1 Omni-dimensional dynamic convolution …

软考高级系统架构设计师系列之:案例分析典型试题三

软考高级系统架构设计师系列之:案例分析典型试题三 一、Web 2.0技术1.案例试题2.案例试题分析3.案例试题参考答案二、虚拟化技术1.案例试题2.案例试题分析3.案例试题参考答案三、嵌入式软件体系架构1.案例试题2.案例试题分析3.案例试题参考答案四、实时系统1.案例试题2.案例试…

Jenkins 重新定义 pom 内容,打包

文章目录 源码管理构建 源码管理 添加仓库地址&#xff0c;拉取凭证&#xff0c;选择需要的分支 构建 勾选 构建环境 下删除原始 build 配置&#xff0c;防止文件错误 Pre Steps 构建前处理 pom.xml &#xff0c;例如我是需要删除该模块的所有子模块配置&#xff0c;我这里…

面试题之Vue和React的区别是什么?

一提到前端框架&#xff0c;相信大家都对Vue和React不陌生&#xff0c;这两个前端框架都是比较主流的&#xff0c;用户也都比较多&#xff0c;但是我们在使用这些框架的时候&#xff0c;是否对这两个框架之间的区别有所了解呢&#xff1f;接下来&#xff0c;让我们来一起的系统…

vscode下ssh免密登录linux服务器

vscode使用ssh免密登录linux 1、安装SSH插件2、生成密钥3、linux安装ssh服务4、linux下配置公钥5、vscode远程登录 注&#xff1a;测试环境为window10Ubuntu1804/Ubuntu2204 1、安装SSH插件 扩展->搜索SSH->点击install进行安装&#xff0c;如下图所示&#xff1a; 2、…