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

news2024/9/23 9:26:51

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


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2054040.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1 什么是linux驱动

1 目录 1 一、什么是linux驱动&#xff1f; 1、驱动的作用 2、 3、驱动的分类 4、linux源码 5、最简单的linux驱动 二、如何编译驱动程序 -- 有两种编译方法&#xff1a; -- 什么是Linux内核模块&#xff1f; -- Linux内核模块的编译 一、什么是linux驱动&#xff…

原生HTML5、CSS、JavaScript实现简易网易云音乐播放

1.效果图 2.源码 1.index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>网易云音乐</title><link rel"stylesheet" href"../CSS/index.css"> </head>…

C++:新枚举与新结构

一、枚举 &#xff08;一&#xff09;C枚举&#xff1f;真整数&#xff01; 考虑下面的程序 #include <stdio.h> #include <stdlib.h>typedef enum {spring, summer, autumn, winter} Season;void printSeason(Season season){switch(season){case spring:print…

【Java学习】实现图书管理系统

所属专栏&#xff1a;Java学习 &#x1f341;1. 功能演示 用户分为普通用户和管理员&#xff0c;登录进系统之后可以对图书进行一系列操作&#xff0c;此时我们要明白&#xff0c;对图书的操作是通过书架来执行的&#xff0c;我们平常在图书馆上借书就是在书架上 &#x1f…

简简单单用用perf

实践前提&#xff1a;正确安装 perf 和 FlameGrap。若没安装&#xff0c;心领神会亦可。 1 示例程序 #define m_loop() ({ for(int i0; i < 1000000; i); })void fb(void) {m_loop(); }void fj(void) {fb(); }void fy(void) {m_loop(); }void loop(void) {for (;;) {fy();…

实习教训,永远铭记

1.毕了业宁宁可收入低一点&#xff0c;但一定去那种开发产品有规章制度&#xff0c;有流程规范的公司。 永远不接受小公司&#xff0c;没有任何规范可言的小公司&#xff01;&#xff01;&#xff01;&#xff01; 永远不接受小公司&#xff0c;没有任何规范可言的小公司&…

Docker手动在虚拟机上部署前端、后端和数据库

&#x1f4a5; 该系列属于【SpringBoot基础】专栏&#xff0c;如您需查看其他SpringBoot相关文章&#xff0c;请您点击左边的连接 目录 一、项目准备 二、MySQL数据库部署 三、SpringBoot后端部署 四、Vue前端部署 一、项目准备 准备数据库、前端项目、后端项目。 准备一…

YOLOv8跑通POSE分类--姿态检测coco8-pos数据集

目录 1.数据集格式如下 2.训练的代码如下 3.训练的网络如下 4.训练的结果如下 简单留个备注&#xff0c;方便自己以后查找 1.数据集格式如下 txt里面的格式 类别 中心点x,y 宽高 姿态1的x,姿态1的y,姿态可见度。。。。 <class-index> <x> <y> <widt…

使用dockerDesktop下载x86,amd64,arm64镜像

开启梯子 修改dockerDesktop配置&#xff0c;将experimental的值设置成 true&#xff0c;意思是&#xff1a;开启manifest实验特性 重启docker后下载镜像 –platform后面就是架构版本&#xff0c;x86,amd64,arm64 C:\Users\dell> docker pull --platformarm64 nginx:late…

Linux--C语言之指针

文章目录 一、指针的引入二、指针概述三、指针变量&#xff08;一&#xff09;指针变量的定义语法&#xff1a;举例&#xff1a;注意&#xff1a; &#xff08;二&#xff09;指针变量的使用1. 指针变量的赋值2. 操作指针变量的值3. 操作指针变量指向的值4. 两个有关运算符的使…

【DA】《Augmentation for small object detection》

arXiv-2019 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method4.1 Oversampling4.2 Augmentation4.3 Copy-Pasting Strategies 5 Experiments5.1 Datasets and Metrics5.2 Oversampling5.3 Augmentation5.4 Copy-Pasting strategies5.4…

Python入门级[ 基础语法 函数... ] 笔记 例题较多

本文是刚学习Python的笔记&#xff0c;当时使用的编辑器是交互式编程&#xff0c;所以很多代码可能在你们的编译器上面不能运行&#xff0c;我用快引用引起来了&#xff0c;还需要大家自己动手试一试。 内容涉及的比较简单&#xff0c;主要还是Python的语法部分&#xff1a;三…

Ubuntu20.04.4.LTS系统如何下载安装VirtualBox虚拟机?

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

Solidworks二次开发:变螺距螺旋线

在帮助文档中&#xff0c;找到变螺距螺旋线的VBA代码&#xff0c;如下&#xff1a; --------------------------------------------------------------Preconditions: Verify that the specified part document template exists.Postconditions:1. Creates a variable-pitch h…

Nginx 学习之 配置支持 IPV6 地址

目录 搭建并测试1. 下载 NG 安装包2. 安装编译工具及库文件3. 上传并解压安装包4. 编译5. 安装6. 修改配置7. 启动 NG8. 查看 IP 地址9. 测试 IP 地址9.1. 测试 IPV4 地址9.2. 测试 IPV6 地址 IPV6 测试失败原因1. curl: [globbing] error: bad range specification after pos …

SQL— DDL语句学习【后端 9】

SQL— DDL语句学习 在数据管理的广阔领域中&#xff0c;SQL&#xff08;Structured Query Language&#xff09;作为操作关系型数据库的编程语言&#xff0c;扮演着举足轻重的角色。它不仅定义了操作所有关系型数据库的统一标准&#xff0c;还为我们提供了强大的工具来管理、查…

20240819用SDDiskTool_v1.72写IMG固件到256GB的TF卡后再用它给飞凌OK3588-C核心板刷机

20240819用SDDiskTool_v1.72写IMG固件到256GB的TF卡后再用它给飞凌OK3588-C核心板刷机 2024/8/19 10:35 1、精简的配置HDMI0为主显示屏的步骤&#xff1a; 在串口终端中启动到uboot阶段&#xff0c;按空格进入 显示配置模式。 按 2 进入&#xff1a;2:Display type 按 a 两次…

2、Future与CompletableFuture实战

Future与CompletableFuture实战 Callable与Future与FutureTask介绍Callable详解Future介绍FutureTask使用使用案例&#xff1a;促销活动中商品信息查询 Future的局限性 CompletableFuture使用详解应用场景创建异步操作runAsync&supplyAsync 获取结果join&get 结果处理w…

《亿级流量系统架构设计与实战》第十一章 Timeline Feed服务

Timeline Feed服务 一、概述1、分类2、功能 二、设计原理1、拉模式与用户发件箱2、推模式与用户收件箱3、推拉模式结合 三、关键技术1、内容与用户收件箱的交互&#xff08;推模式&#xff09;2、推送拆分子任务3、收件箱模型设计 内容总结自《亿级流量系统架构设计与实战》 一…

[linux#39][线程] 详解线程的概念

线程&#xff1a;是进程内的一个执行分支。线程的执行粒度比进程要细 什么是线程&#xff1f; • 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程 是“一个进程内部的控制序列” • 一切进程至少都有一个执行线程 • …