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
© 著作权归作者所有,转载或内容合作请联系作者

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

相关推荐
有意义2 小时前
深度拆解分割等和子集:一维DP数组与倒序遍历的本质
前端·算法·面试
用户726876103373 小时前
解放双手的健身助手:基于 Rokid AR 眼镜的运动计时应用
算法
Wect4 小时前
LeetCode 17. 电话号码的字母组合:回溯算法入门实战
前端·算法·typescript
ZhengEnCi1 天前
08c. 检索算法与策略-混合检索
后端·python·算法
程序员小崔日记1 天前
大三备战考研 + 找实习:我整理了 20 道必会的时间复杂度题(建议收藏)
算法·408·计算机考研
任沫1 天前
字符串
数据结构·后端
lizhongxuan1 天前
AI小镇 - 涌现
算法·架构
AI工程架构师1 天前
通常说算力是多少 FLOPS,怎么理解,GPU和CPU为什么差异这么大
算法
祈安_1 天前
Java实现循环队列、栈实现队列、队列实现栈
java·数据结构·算法
归去_来兮2 天前
拉格朗日插值算法原理及简单示例
算法·数据分析·拉格朗日插值