react最好用的swiper插件和拖动插件 react-tiny-slider react-draggable

react移动端项目,其实有挺多的ui框架的,但是我们公司的项目,都是自己封装的ui库,又不可能为了一个轮播图就去再安装一个ui库

所以找了很多的轮播插件,都是不能满足需求

最后找到了它,react-tiny-slider,简直太好用了,而且还有官方各种demo

好了,其实按照上面两个链接,你也可以完成你的轮播需求了,但是我还是想记录一下我的代码

第一步:安装依赖

yarn add react-tiny-slider


第二步:引入插件

import Carousel from "react-tiny-slider"


第三步:开始你的代码啦

const carousel = useRef(null)

<Carousel edgePadding={24} swipeAngle={false} items={1} mouseDrag ref={carousel} controls={false} nav={false}>

{SWIPER_ITEM.map((item) => (

<div key={item.title}>

<SwipterItem {...item} /> /** 这是你自己的组件 */

</div>

))}

</Carousel>

好了,这样就大功告成了!!!

react-draggable

好用的react拖动组件

react-draggable
最后编辑于:2021-12-09 18:32
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
生成论实验室几秒前
生成式通用智能(GAGI):基于《易经》状态空间的认知架构
人工智能·神经网络·算法·架构·信息与通信
如意猴几秒前
002【模拟】--蛇形方阵、字符串展开
算法
JMchen1231 分钟前
Android相机硬件抽象层(HAL)逆向工程:定制ROM的相机优化深度指南
android·开发语言·c++·python·数码相机·移动开发·android studio
娇娇乔木2 分钟前
模块九--static/可变参数/递归/冒泡排序/二分查找/对象数组/方法参数/快速生成方法/debug--尚硅谷Javase笔记总结
java·开发语言
We་ct3 分钟前
LeetCode 242. 有效的字母异位词:解法解析与时空优化全攻略
前端·算法·leetcode·typescript
执着2593 分钟前
力扣hot100 - 104、二叉树的最大深度
算法·leetcode·职场和发展
_OP_CHEN5 分钟前
【算法基础篇】(五十四)解析错排问题:从信封错位到编程实战,一次性搞懂排列组合中的 “反常识” 难题!
算法·蓝桥杯·c/c++·组合计数·算法竞赛·acm/icpc·错排问题
浅碎时光8075 分钟前
Qt (信号与槽 Widget控件 qrc文件)
开发语言·qt
我要打打代码6 分钟前
C# 各种类库
开发语言·c#
小辰辰就要混8 分钟前
20、Lambda表达式和Stream
开发语言·python