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

react 中使用 swiper

最近项目中需要用到轮播图,我立马想起了 swiper ,那么本文就来带大家体验一下如何在 React 中使用这个插件,使用的是 函数组 + hooks 的形式。

需求非常简单,就是一个可以自动播放、点击切换的轮播图(跑马灯),可以同时展示n张图片,无限滚动。注意:如果是遇到纯文字的轮播效果,那我建议完全可以不用这么重的东西,直接使用 antd 中的Tab 组件或者干脆自己写也能达到效果
在这里插入图片描述

直接食用

示例效果如下
请添加图片描述

1、安装依赖

npm i swiper

2、直接完成代码
需要什么就从'swiper/modules'中拓展,下面的几个满足大多数需求

// index.tsx
import { useState } from 'react';
import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';import './index.css'
import SlideNextButton from './SlideNextButton' //自定义控制按钮export default function Index () => {const [ list ] = useState([ 1, 2, 3, 4, 5, 6, 7])return (<SwiperloopcenteredSlidesmodules={[Navigation, Pagination, Scrollbar]}spaceBetween={50}slidesPerView={3}navigation // 对应 Navigationpagination={{ clickable: true }} // 对应 Paginationscrollbar={{ draggable: true }} // 对应 ScrollbaronSwiper={(swiper) => console.log(swiper)}onSlideChange={() => console.log('slide change')}>{ list.map(item =><SwiperSlide><div className="card">{ item }</div></SwiperSlide>)}<SlideNextButton/></Swiper>);
};
// index.css
.card{display: flex;justify-content: center;align-items: center;height: 200px;background: pink;
}

额外的自定控制组件 <SlideNextButton/>
要使用useSwiper 一定要将组件作为 <Swiper/>子组件使用

// SlideNextButton.tsx
import { useSwiper } from 'swiper/react';export default function SlideNextButton() {const swiper = useSwiper();const onPrev = () => {swiper.slidePrev()}const onNext = () => {swiper.slideNext()}return (<div style={{ position: 'fixed' }}><button onClick={onPrev}>prev</button><button onClick={onNext}>next</button></div>);
}

相关文章:

react 中使用 swiper

最近项目中需要用到轮播图&#xff0c;我立马想起了 swiper &#xff0c;那么本文就来带大家体验一下如何在 React 中使用这个插件&#xff0c;使用的是 函数组 hooks 的形式。 需求非常简单&#xff0c;就是一个可以自动播放、点击切换的轮播图&#xff08;跑马灯&#xff0…...

2024年搭建知识库系统5大工具推荐

现如今&#xff0c;越来越多的企业开始了解并搭建知识库系统&#xff0c;想要带动企业员工的工作效率以提高企业运营效率。各种各样搭建知识库系统的工具应运而生&#xff0c;而如何在众多工具中&#xff0c;选择出最适合独特的企业产品的一个工具&#xff0c;成为企业亟待解决…...

Golang内存分配分三种Golang内存分配分三种类型

Golang内存分配分三种类型 线程缓存&#xff08;Thread Cache&#xff09; 拟人化解释&#xff1a;线程缓存就像是每个邮局员工的私人储物柜。每个员工都有自己的储物柜&#xff0c;用来暂时存放需要处理的小信件和包裹。当有新的信件或包裹需要处理时&#xff0c;员工会先看看…...

Marin说PCB之如何在主板上补偿链路中的走线的等长误差?

一场雨把我困在这里&#xff0c;你冷漠地看我没有穿雨衣淋成落汤鸡。今天刚刚出门时候看天气预报没有雨&#xff0c;于是我就没有带雨衣骑电动车去公司了&#xff0c;谁知道回来的路上被淋成狗了。天气预报就像是女人的脾气那样&#xff0c;不能完全相信的。 好了&#xff0c;我…...

企业在现代市场中的战略:通过数据可视化提升财务决策

新时代&#xff0c;财务规划团队不仅仅是企业内部的一个部门&#xff0c;更是帮助企业做出明智决策和设定战略目标的中坚力量。在当今瞬息万变的商业环境中&#xff0c;财务专业人士需要具备应对挑战并引导企业走向成功的角色职能。企业领导者时常面临着数据压力&#xff0c;需…...

printf(“不喝酒就没得朋友可是只要偶一喝酒就喝倒一代朋友人生真的很矛盾“);

/*无线通讯语言模块测试PAST 2019 12 28 L298 CODE1871**/ #include <REG52.H> #include <intrins.H> #include "stdio.h" #define uint unsigned int #defi…...

JAVA小案例-分别计算100以内奇数和偶数的和

JAVA小案例-分别计算100以内奇数和偶数的和 没啥可说的&#xff0c;就是for循环加if分支&#xff0c;也可以用while写。 代码如下&#xff1a; public class Jiouhe {/*** 分别计算100以内奇数和偶数的和* param args*/public static void main(String[] args){int sum10;in…...

头歌初识redis答案

头歌初识Redis的答案可以从多个方面进行归纳和总结。以下是根据参考文章提供的信息&#xff0c;按照清晰、分点表示和归纳的方式给出的答案&#xff1a; 一、Redis基础知识 Redis有16个数据库&#xff0c;默认使用第0个数据库&#xff0c;可以用select命令进行切换。 Redis是…...

Linux.小技巧快捷键

1. ctrl c 强制停止 终止某些程序的运行 也可以取消某行命令 2. ctrl d 退出或登出 进入python环境中&#xff0c;使用ctrl d 退出 3.history 查看历史使用了哪些命令 4. ! 历史最近使用的命令的开头 5.使用ctrl r 搜索历史使用的命令 按下 ctrl r 会进入 reverse -…...

传统的老程序员转向人工智能需要准备好这三件事情,你知道吗?

前言 人类文明的进步有时候快的吓人&#xff0c;在我们父辈上街买菜还是以一毛为计量买菜的时代&#xff0c;其实过去了也没有多长时间。现在买菜接近10块为准了&#xff0c;正常在集市上喊着怎么卖&#xff1f;摊主喊着三斤&#xff0c;包含的意思是10块钱三斤。相隔这么多年…...

ICPC2024 邀请赛西安站(7/8/13)

心得 [ICPC2024 Xian I] ICPC2024 邀请赛西安站重现赛 - 比赛详情 - 洛谷 7表示赛时ac了7个&#xff0c;8表示含补题总共ac数&#xff0c;13表示题目总数 题目 M. Chained Lights 打表&#xff0c;发现只有k1是YES //#include <bits/stdc.h> #include<iostream&…...

STM32f103实现按键长按 短按 双击

今天来分享一个使用EXIT外部中断加TIM计时器实现按键长短按以及双击操作&#xff0c;不过笔者在双击上有点瑕疵&#xff0c;就是当你按下双击第一下停顿几秒按第二下依然会识别为双击操作&#xff0c;笔者猜测只要板子不停电即便到第二天按下第二下依旧会识别双击操作&#xff…...

【WP】猿人学13_入门级cookie

https://match.yuanrenxue.cn/match/13 抓包分析 抓包分析发现加密参数是cookie中有一个yuanrenxue_cookie 当cookie过期的时候&#xff0c;就会重新给match/13发包&#xff0c;这个包返回一段js代码&#xff0c;应该是生成cookie的 <script>document.cookie(y)(u)(a…...

分享一款提取抖音小店商家电话的软件使用教程

抖音作为一款国内非常流行的短视频分享平台&#xff0c;吸引了大量用户和商家。许多商家在抖音上开设了小店&#xff0c;但是抖音并没有提供直接获取商家电话的功能。本文将分享一款提取抖音小店商家电话的软件&#xff0c;并附带使用教程和代码。 教程 步骤一&#xff1a;安…...

反转链表的三种方法--面试必考(图例超详细解析,小白一看就会!!!)

目录 一、前言 二、题目描述 三、解题方法 ⭐ 头插法 --- 创建新的链表 ⭐ 迭代法 --- 三指针 ⭐ 递归法 四、总结与提炼 五、共勉 一、前言 反转链表这道题&#xff0c;可以说是--链表专题--&#xff0c;最经典的一道题&#xff0c;也是在面试中频率最高的一道题目&…...

Springboot注意点

1.Usermapper里加param注解 2.RequestParam 和 RequestBody的区别&#xff1a; RequestParam 和 RequestBody的区别&#xff1a; RequestParam 和 RequestBody 是Spring框架中用于处理HTTP请求的两个不同的注 get请求一般用url传参数&#xff0c;所以参数名和参数的值就在ur…...

数组和指针的联系(C语言)

数组和指针是两种不同的数据类型&#xff0c;数组是一种构造类型&#xff0c;用于存储一组相同类型的变量&#xff1b;而指针是一种特殊类型&#xff0c;专门用来存放数据的地址。数组名除了sizeof(数组名)和&数组名表示整个数组外&#xff0c;其他情况下都表示的是首元素的…...

安全区域边界

文章目录 安全区域边界边界防护跨边界流量通过受控接口通信非法内联非法外联限制无线网络 访问控制启用基于白名单的访问控制策略优化访问控制表根据五元组控制根据会话状态控制根据应用协议和内容控制 入侵防范外部发起的攻击内部发起的攻击对新型攻击防范及时检测攻击行为 恶…...

力扣每日一题 6/6

2938.区分黑球与白球[中等] 题目&#xff1a; 桌子上有 n 个球&#xff0c;每个球的颜色不是黑色&#xff0c;就是白色。 给你一个长度为 n 、下标从 0 开始的二进制字符串 s&#xff0c;其中 1 和 0 分别代表黑色和白色的球。 在每一步中&#xff0c;你可以选择两个相邻的…...

游戏心理学Day05

第三章 游戏即学习 《超级马里奥》是游戏史上的经典之作&#xff0c;我们都记得第一次踩到敌人&#xff0c;第一次顶碎砖块时的快乐&#xff0c;也记得为了通过某个关卡而付出的努力和艰辛。当我们掌握了规律和技巧之后&#xff0c;这些难题就不再是难题&#xff0c;因为我们习…...

RyTuneX:WinUI3驱动的Windows性能优化引擎

RyTuneX&#xff1a;WinUI3驱动的Windows性能优化引擎 【免费下载链接】RyTuneX RyTuneX is a cutting-edge optimizer built with the WinUI 3 framework, designed to amplify the performance of Windows devices. Crafted for both Windows 10 and 11. 项目地址: https:/…...

解放B站缓存:m4s-converter让你的视频资产重获自由

解放B站缓存&#xff1a;m4s-converter让你的视频资产重获自由 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 穿透格式迷雾&#xff1a;解码m4s…...

AppImageLauncher:Linux系统AppImage应用管理的革新方案

AppImageLauncher&#xff1a;Linux系统AppImage应用管理的革新方案 【免费下载链接】AppImageLauncher Helper application for Linux distributions serving as a kind of "entry point" for running and integrating AppImages 项目地址: https://gitcode.com/g…...

SRWE:打破Windows窗口限制的智能编辑器

SRWE&#xff1a;打破Windows窗口限制的智能编辑器 【免费下载链接】SRWE Simple Runtime Window Editor 项目地址: https://gitcode.com/gh_mirrors/sr/SRWE SRWE&#xff08;Simple Runtime Window Editor&#xff09;是一款专为Windows系统设计的实时窗口编辑工具&am…...

Windows 11 24H2 LTSC 微软商店恢复方案:从功能缺失到应用生态完整指南

Windows 11 24H2 LTSC 微软商店恢复方案&#xff1a;从功能缺失到应用生态完整指南 【免费下载链接】LTSC-Add-MicrosoftStore Add Windows Store to Windows 11 24H2 LTSC 项目地址: https://gitcode.com/gh_mirrors/ltscad/LTSC-Add-MicrosoftStore 一、LTSC系统的应用…...

5大场景落地指南:企业级语音识别服务从部署到优化全攻略

5大场景落地指南&#xff1a;企业级语音识别服务从部署到优化全攻略 【免费下载链接】whisper-asr-webservice OpenAI Whisper ASR Webservice API 项目地址: https://gitcode.com/gh_mirrors/wh/whisper-asr-webservice 【项目核心价值定位】解决3大语音识别痛点的开源…...

使用cv_unet_image-colorization增强电商商品图像的实践

使用cv_unet_image-colorization增强电商商品图像的实践 电商平台中&#xff0c;商品图像的质量直接影响消费者的购买决策。本文将分享如何利用cv_unet_image-colorization模型&#xff0c;为老商品图上色、提升低质图像质量&#xff0c;从而显著改善商品展示效果。 1. 电商图像…...

7个硬核级调校技巧:Citra模拟器全方位优化指南

7个硬核级调校技巧&#xff1a;Citra模拟器全方位优化指南 【免费下载链接】citra A Nintendo 3DS Emulator 项目地址: https://gitcode.com/gh_mirrors/cit/citra Citra作为开源的任天堂3DS模拟器&#xff0c;凭借其跨平台特性和持续优化&#xff0c;已成为玩家在PC上体…...

[开源工具]问题解决指南:Axure本地化方案的效率提升实践

[开源工具]问题解决指南&#xff1a;Axure本地化方案的效率提升实践 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 作为原型设计…...

突破格式限制:3种高效NCM转码方案全解析

突破格式限制&#xff1a;3种高效NCM转码方案全解析 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump NCM格式作为网易云音乐的加密音频格式&#xff0c;常导致用户面临设备兼容性差、跨平台播放受阻等问题。本文将通过开源工具实现NC…...