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

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

相关推荐
ai产品老杨1 天前
H264 H265视频分析常见问题和排查清单
人工智能·算法·音视频
Jerry1 天前
LeetCode 454. 四数相加 II
算法
可编程芯片开发1 天前
基于CPS-SPWM链式STATCOM系统在电压不平衡环境下控制策略的simulink建模与仿真
算法
2zcode1 天前
基于MATLAB图像处理的饮料瓶灌装液位检测系统设计与实现
开发语言·图像处理·matlab
Jerry1 天前
LeetCode 202. 快乐数
算法
hans汉斯1 天前
基于改进交叉熵损失函数与Transformer的心电信号高风险分类研究
功能测试·深度学习·算法·yolo·目标检测·分类·transformer
Jerry1 天前
LeetCode 349. 两个数组的交集
算法
必须得开心呀1 天前
QT解决中文乱码问题
开发语言·qt
fpcc1 天前
数据结构—表
数据结构
YuK.W1 天前
Leetcode100: 70.爬楼梯、118.杨辉三角、198.打家劫舍
java·算法·leetcode