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; 普通版本 重点ÿ…...
零基础Linux_23(多线程)线程安全+线程互斥(加锁)+死锁
目录 1. 线程安全 1.1 线程不安全前期 1.2 线程不安全原因 2. 线程互斥 2.1 加锁保护(代码) 2.2 锁的本质 3. 可重入对比线程安全 4. 死锁 4.1 死锁的必要条件 4.2 避免死锁 5. 笔试面试题 答案及解析 本篇完。 1. 线程安全 基于上一篇线程…...
【算法|贪心算法系列No.5】leetcode409. 最长回文串
个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 🍔本专栏旨在提高自己算法能力的同时,记录一下自己的学习过程,希望…...
【Linux】安装与配置虚拟机及虚拟机服务器坏境配置与连接---超详细教学
一,操作系统介绍 1.1.什么是操作系统 操作系统(Operating System,简称OS)是一种系统软件,它是计算机硬件和应用软件之间的桥梁。它管理计算机的硬件和软件资源,为应用程序提供接口和服务,并协…...
机器学习实验一:KNN算法,手写数字数据集(使用汉明距离)(2)
KNN-手写数字数据集: 使用sklearn中的KNN算法工具包( KNeighborsClassifier)替换实现分类器的构建,注意使用的是汉明距离; 运行结果:(大概要运行4分钟左右) 代码: import pandas as…...
docker应用部署---nginx部署的配置
1. 搜索nginx镜像 docker search nginx2. 拉取nginx镜像 docker pull nginx3. 创建容器,设置端口映射、目录映射 # 在/root目录下创建nginx目录用于存储nginx数据信息 mkdir ~/nginx cd ~/nginx mkdir conf cd conf# 在~/nginx/conf/下创建nginx.conf文件,粘贴下…...
Sql Server中的表组织和索引组织(聚集索引结构,非聚集索引结构,堆结构)
正文 SqlServer用三种方法来组织其分区中的数据或索引页: 1、聚集索引结构 聚集索引是按B树结构进行组织的,B树中的每一页称为一个索引节点。每个索引行包含一个键值和一个指针。指针指向B树上的某一中间级页(比如根节点指向中间级节点中的…...
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 配置服务启动(使用 systemctl 的方法)启动 redis配置开机启动操作redis使…...
36基于matlab的对分解层数和惩罚因子进行优化
基于matlab的对分解层数和惩罚因子进行优化。蚁狮优化算法优化VMD,算术优化算法优化VMD,遗传优化算法优化VMD,灰狼优化算法优化VMD,海洋捕食者优化算法优化VMD,粒子群优化VMD,麻雀优化算法优化VMD,鲸鱼优化…...
【Flutter】自定义分段选择器Slider
【Flutter】ZFJ自定义分段选择器Slider 前言 在开发一个APP的时候,需要用到一个分段选择器,系统的不满足就自己自定义了一个; 可以自定义节点的数量、自定义节点的大小、自定义滑竿的粗细,自定义气泡的有无等等… 基本上满足你…...
【软考系统架构设计师】2023年系统架构师冲刺模拟习题之《软件工程》
在软考中软件工程模块主要包含以下考点: 文章目录 软件过程模型🌟🌟🌟🌟逆向工程🌟基于构件的软件工程🌟🌟软件开发与软件设计与维护净室软件工程软件模型软件需求 软件过程模型&am…...
非遗主题网站的设计与实现基于PHP实现
包括源码参考论文 下载地址: https://juzhendongli.store/commodity/details/18...
YOLO目标检测——红外人员数据集【含对应voc、coco和yolo三种格式标签+划分脚本】
实际项目应用:红外热像仪进行安全监控数据集说明:红外人员检测数据集,真实场景的高质量图片数据标签说明:使用lableimg标注软件标注,标注框质量高,含voc(xml)、coco(json)和yolo(txt)三种格式标签ÿ…...
C++项目——云备份-⑧-客户端各模块实现
文章目录 专栏导读1.客户端数据管理模块实现2.客户端文件检测模块实现3.客户端文件备份模块设计4.客户端文件备份模块实现 专栏导读 🌸作者简介:花想云 ,在读本科生一枚,C/C领域新星创作者,新星计划导师,阿…...
分享一款基于 AI 的 Chrome 插件
最近使用大模型比较多,公司虽然提供了免费的 ChatGPT 但是需要跳转特定页面才能访问,比较麻烦,于是就想到是否可以开发一款类似于有道词典一样的 Chrome 插件,可以在任意页面使用,虽然市面上也有类似的插件,…...
Spring Authorization Server 1.1 扩展实现 OAuth2 密码模式与 Spring Cloud 的整合实战
目录 前言无图无真相创建数据库授权服务器maven 依赖application.yml授权服务器配置AuthorizationServierConfigDefaultSecutiryConfig 密码模式扩展PasswordAuthenticationTokenPasswordAuthenticationConverterPasswordAuthenticationProvider JWT 自定义字段自定义认证响应认…...
第二证券:AIGC概念活跃,焦点科技、三维通信涨停,万兴科技大涨
AIGC概念24日盘中走势生动,到发稿,万兴科技、三态股份涨超10%,焦点科技、三维通讯、我国科传等涨停,中文在线涨超9%,果麦文明、新国都涨约7%。 消息面上,各大电商途径于10月18-24日先后发动“双11”大促或…...
7-4、S加减速转动实现【51单片机控制步进电机-TB6600系列】
摘要:本节介绍实现步进电机S曲线运动的代码 一、目标功能 实现步进电机转动总角度720,其中加减速各90 加速段:加速类型:S曲线 加速角度:角度为90 起步速度:30RPM, 终止速度&#x…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
