当前位置: 首页 > news >正文

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}

相关文章:

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

共用代码 import swiper/css import swiper/css/navigation import swiper/css/paginationimport { Navigation, Pagination, Scrollbar, A11y, Autoplay, EffectCreative } from swiper/modules;import { Swiper, SwiperSlide, } from swiper/react; 普通版本 重点&#xff…...

零基础Linux_23(多线程)线程安全+线程互斥(加锁)+死锁

目录 1. 线程安全 1.1 线程不安全前期 1.2 线程不安全原因 2. 线程互斥 2.1 加锁保护&#xff08;代码&#xff09; 2.2 锁的本质 3. 可重入对比线程安全 4. 死锁 4.1 死锁的必要条件 4.2 避免死锁 5. 笔试面试题 答案及解析 本篇完。 1. 线程安全 基于上一篇线程…...

【算法|贪心算法系列No.5】leetcode409. 最长回文串

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…...

【Linux】安装与配置虚拟机及虚拟机服务器坏境配置与连接---超详细教学

一&#xff0c;操作系统介绍 1.1.什么是操作系统 操作系统&#xff08;Operating System&#xff0c;简称OS&#xff09;是一种系统软件&#xff0c;它是计算机硬件和应用软件之间的桥梁。它管理计算机的硬件和软件资源&#xff0c;为应用程序提供接口和服务&#xff0c;并协…...

机器学习实验一:KNN算法,手写数字数据集(使用汉明距离)(2)

KNN-手写数字数据集&#xff1a; 使用sklearn中的KNN算法工具包&#xff08; KNeighborsClassifier)替换实现分类器的构建&#xff0c;注意使用的是汉明距离&#xff1b; 运行结果&#xff1a;&#xff08;大概要运行4分钟左右&#xff09; 代码&#xff1a; import pandas as…...

docker应用部署---nginx部署的配置

1. 搜索nginx镜像 docker search nginx2. 拉取nginx镜像 docker pull nginx3. 创建容器&#xff0c;设置端口映射、目录映射 # 在/root目录下创建nginx目录用于存储nginx数据信息 mkdir ~/nginx cd ~/nginx mkdir conf cd conf# 在~/nginx/conf/下创建nginx.conf文件,粘贴下…...

Sql Server中的表组织和索引组织(聚集索引结构,非聚集索引结构,堆结构)

正文 SqlServer用三种方法来组织其分区中的数据或索引页&#xff1a; 1、聚集索引结构 聚集索引是按B树结构进行组织的&#xff0c;B树中的每一页称为一个索引节点。每个索引行包含一个键值和一个指针。指针指向B树上的某一中间级页&#xff08;比如根节点指向中间级节点中的…...

C++类对象反制机制实现_精简修改版

前几天写的类对象反射机制太烦锁了,今天写个修改版的,精简为两个类 一个是类的数据结构,另一个是类的父类对象,把所有操作类的方法都写到父类中 1.类的信息结构体 struct Field_Node {TCHAR m_name[20]; //字段名称TCHAR m_typeName[20]; // 字段类型名称size_t m_typeHashC…...

C#开发的IEnumerable接口

C#开发的IEnumerable接口 在前面分析中,我们会遇到下面这行代码: var refineries = self.World.ActorsWithTrait<IAcceptResources>() .Where(r => r.Actor != ignore && r.Actor.Owner == self.Owner && IsAcceptableProcType(r.Actor)) .Select…...

Redis详细安装教程

目录 一、Redis 的安装及启动停止1-1 下载 redis的压缩包1-2 开始解压 redis1-3 执行 make 命令编译1-4 启动 redis修改配置文件1-5 设置远程连接1-6 设置后台启动1-7 设置密码1-8 配置服务启动&#xff08;使用 systemctl 的方法&#xff09;启动 redis配置开机启动操作redis使…...

36基于matlab的对分解层数和惩罚因子进行优化

基于matlab的对分解层数和惩罚因子进行优化。蚁狮优化算法优化VMD,算术优化算法优化VMD&#xff0c;遗传优化算法优化VMD&#xff0c;灰狼优化算法优化VMD&#xff0c;海洋捕食者优化算法优化VMD&#xff0c;粒子群优化VMD&#xff0c;麻雀优化算法优化VMD&#xff0c;鲸鱼优化…...

【Flutter】自定义分段选择器Slider

【Flutter】ZFJ自定义分段选择器Slider 前言 在开发一个APP的时候&#xff0c;需要用到一个分段选择器&#xff0c;系统的不满足就自己自定义了一个&#xff1b; 可以自定义节点的数量、自定义节点的大小、自定义滑竿的粗细&#xff0c;自定义气泡的有无等等… 基本上满足你…...

【软考系统架构设计师】2023年系统架构师冲刺模拟习题之《软件工程》

在软考中软件工程模块主要包含以下考点&#xff1a; 文章目录 软件过程模型&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;逆向工程&#x1f31f;基于构件的软件工程&#x1f31f;&#x1f31f;软件开发与软件设计与维护净室软件工程软件模型软件需求 软件过程模型&am…...

非遗主题网站的设计与实现基于PHP实现

包括源码参考论文 下载地址: https://juzhendongli.store/commodity/details/18...

YOLO目标检测——红外人员数据集【含对应voc、coco和yolo三种格式标签+划分脚本】

实际项目应用&#xff1a;红外热像仪进行安全监控数据集说明&#xff1a;红外人员检测数据集&#xff0c;真实场景的高质量图片数据标签说明&#xff1a;使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;含voc(xml)、coco(json)和yolo(txt)三种格式标签&#xff…...

C++项目——云备份-⑧-客户端各模块实现

文章目录 专栏导读1.客户端数据管理模块实现2.客户端文件检测模块实现3.客户端文件备份模块设计4.客户端文件备份模块实现 专栏导读 &#x1f338;作者简介&#xff1a;花想云 &#xff0c;在读本科生一枚&#xff0c;C/C领域新星创作者&#xff0c;新星计划导师&#xff0c;阿…...

分享一款基于 AI 的 Chrome 插件

最近使用大模型比较多&#xff0c;公司虽然提供了免费的 ChatGPT 但是需要跳转特定页面才能访问&#xff0c;比较麻烦&#xff0c;于是就想到是否可以开发一款类似于有道词典一样的 Chrome 插件&#xff0c;可以在任意页面使用&#xff0c;虽然市面上也有类似的插件&#xff0c…...

Spring Authorization Server 1.1 扩展实现 OAuth2 密码模式与 Spring Cloud 的整合实战

目录 前言无图无真相创建数据库授权服务器maven 依赖application.yml授权服务器配置AuthorizationServierConfigDefaultSecutiryConfig 密码模式扩展PasswordAuthenticationTokenPasswordAuthenticationConverterPasswordAuthenticationProvider JWT 自定义字段自定义认证响应认…...

第二证券:AIGC概念活跃,焦点科技、三维通信涨停,万兴科技大涨

AIGC概念24日盘中走势生动&#xff0c;到发稿&#xff0c;万兴科技、三态股份涨超10%&#xff0c;焦点科技、三维通讯、我国科传等涨停&#xff0c;中文在线涨超9%&#xff0c;果麦文明、新国都涨约7%。 消息面上&#xff0c;各大电商途径于10月18-24日先后发动“双11”大促或…...

7-4、S加减速转动实现【51单片机控制步进电机-TB6600系列】

摘要&#xff1a;本节介绍实现步进电机S曲线运动的代码 一、目标功能 实现步进电机转动总角度720&#xff0c;其中加减速各90 加速段&#xff1a;加速类型&#xff1a;S曲线   加速角度&#xff1a;角度为90   起步速度&#xff1a;30RPM&#xff0c;   终止速度&#x…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...