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


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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows Microsoft Edge 浏览器 配置【密码】

在浏览 Web 时&#xff0c;Microsoft Edge 可以轻松保存密码。 在桌面或移动设备上的 Edge 浏览器中输入新密码时&#xff0c;Microsoft Edge 会询问你是否要记住用户名和密码。 下次访问该网站时&#xff0c;浏览器将完成帐户信息的填写。 如果使用 Microsoft 帐户登录到 Edg…

redis集合若干记录

无序集合 redis通常使用字典结构保存集合数据&#xff0c;字典健存储集合元素&#xff0c;字典值为空。如果一个集合全为整数&#xff0c;使用字典就有点浪费了&#xff0c;redis使用intset保存。 插入元素到intset中 获取插入元素编码&#xff0c;如果插入元素编码级别高于int…

机器学习 之 sklearn的使用介绍和如何找到API

scikit-learn&#xff08;简称 sklearn&#xff09;是基于python语言的一个第三方机器学习库&#xff0c;它提供了简单而有效的工具来进行数据分析和建模。建立在numpy pandas SciPy和Malpotlib库上&#xff0c;下面是对如何使用 sklearn 以及如何找到其 API 的一个基本介绍&am…

仿RabbiteMq实现简易消息队列正式篇(需求分析)

TOC 目录 MQ的实现方法 RabbitMq中的相关概念 消息队列系统模块划分 总体划分 服务端模块 数据管理模块 虚拟机数据管理模块 交换机路由模块 消费者管理模块 信道&#xff08;通信&#xff09;管理模块 连接管理模块 服务端BrokerServer模块 客户端模块 消费者管…

MySQL-MVCC举例说明

在数据库系统中&#xff0c;多版本并发控制&#xff08;MVCC, Multi-Version Concurrency Control&#xff09; 是一种用于提高并发性能的机制&#xff0c;它允许多个事务同时读取和写入数据&#xff0c;而不会产生锁等待和阻塞的问题。MySQL 的 InnoDB 存储引擎广泛使用了 MVC…

Keepalived 高可用集群详解和配置

Keepalived 高可用集群 集群类型 1、LB&#xff08;Load Balance&#xff09;&#xff1a;负载均衡 LVS&#xff1a;四层负载均衡 HAProxy&#xff1a;七层/四层 负载均衡 nginx&#xff1a;七层负载均衡 (http/upstream,stream/upstream) 2、HA&#xff08;High Availa bili…

C++ 设计模式——工厂方法模式

工厂方法模式 工厂方法模式主要组成部分代码实现工厂方法模式模式的 UML 图工厂方法模式 UML 图解析优点和缺点适用场景 工厂方法模式 工厂方法模式是一种创建型设计模式&#xff0c;它通过定义一个接口用于创建对象&#xff0c;但由子类决定实例化哪个类。与简单工厂模式不同…

Spring项目:文字花园(三)

一.实现博客详情 1.后端逻辑代码 controller层添加方法&#xff08;根据博客id查看博客详情&#xff09; RequestMapping("/getBlogDetail")public Result<BlogInfo> getBlogDetail(Integer blogId){log.info("getBlogDetail, blogId: {}", blogId…

vue 后台管理 之 状态管理 vuex 的使用

幸福是一种能力 文章目录 一、数据驱动视图二、VueX 数据公共池 一、数据驱动视图 我们都知道 vue 之所以好用&#xff0c;是因为官方帮我们做了数据驱动视图初始化时将数据和视图进行绑定&#xff0c;通过 watcher 来监听数据的变化&#xff0c;当数据变化时&#xff0c;会触…

这三大创意神器,一个不用就是错过了一个小目标!

【导语】在这个充满无限可能的数字时代&#xff0c;创意成为了推动我们前行的强大动力。但你是否曾因视频背景杂乱无章而苦恼&#xff1f;是否渴望将静态图片瞬间赋予生命&#xff1f;又或是对模糊照片中的珍贵瞬间束手无策&#xff1f;今天&#xff0c;就让我们揭秘三大变态且…

Linux搭建环境:从零开始掌握基础操作(二)

​ ​ 您好&#xff0c;我是程序员小羊&#xff01; 前言 软件测试第一步就是搭建测试环境&#xff0c;如何搭建好测试环境&#xff0c;需要具备两项的基础知识&#xff1a; 1、Linux 命令: 软件测试第一个任务, 一般都需要进行环境搭建, 一部分&#xff0c;环境搭建内容是在服…

Your local changes would be overwritten by merge git

方法二 直接覆盖本地的代码&#xff0c;放弃自己本地的改动&#xff0c;只保留服务器端代码 直接回退到上一个版本&#xff0c;再进行pull。 【步骤】 直接 VCS -> Git -> Reset HEAD… 选择需要的reset模式&#xff1a;hard&#xff08;即放弃本地代码&#xff0c;新修…

JavaScript基础——闭包

闭包简介 闭包的作用 闭包可以保留变量的状态 闭包可以让变量私有化 闭包的缺点 闭包简介 在JavaScript中&#xff0c;重复声明同一个变量会导致变量冲突&#xff0c;在这个时候可以使用闭包创建独立的执行环境。 在JavaScript中&#xff0c;闭包是指封闭的执行环境&#xff…

【图像去噪】论文精读:Toward Convolutional Blind Denoising of Real Photographs(CBDNet)

文章目录 前言Abstract1. Introduction2. Related Work2.1. Deep CNN Denoisers2.2. Image Noise Modeling2.3. Blind Denoising of Real Images 3. Proposed Method3.1. Realistic Noise Model3.2. Network Architecture3.3. Asymmetric Loss and Model Objective3.4. Trainin…

Spring IoCDI(下)—DI的尾声

我们之前学习了控制反转IoC&#xff0c;接下来就开始学习依赖注入DI的细节。 依赖注入是一个过程&#xff0c;是指IoC容器在创建Bean时&#xff0c;去提供运行时所依赖的资源&#xff0c;而资源指的就是对象。我们使用 Autowired 注解&#xff0c;完成依赖注入的操作。简单来说…

使用docker compose一键部署redis服务

使用docker compose一键部署redis服务 1、创建安装目录 mkdir /data/redis/ -p && cd /data/redis2、创建docker-compose.yml文件 version: 3 services:redis:image: registry.cn-hangzhou.aliyuncs.com/xiaopangpang/redis:7.0.5container_name: redisrestart: al…

【STM32项目】在FreeRtos背景下的实战项目的实现过程(二)

个人主页~ 实战项目的实现过程&#xff08;一&#xff09;~ 实战项目的实现过程 二、初步了解各个外设硬件1、OLED模块2、GPS模块3、MPU6050模块4、超声测距模块5、温度测控模块6、语音模块7、SIM模块8、按键模块 三、查阅资料1、查看手册2、查找例程 四、研究硬件功能1、OLED…

js使用run编码计算region的交集并集差集

所有shape都转为run编码 转为run编码后再运算可以节约大量内存 subtractIntervals 函数的逻辑:目前的实现假设了所有的 subIntervals 都会与 intervals 完全重叠,这可能导致计算不准确。应该将 subIntervals 从 intervals 中去除时,考虑到可能的部分重叠。 差集计算:sub…

双剑合璧,网络无敌!Windows Server 2012 R2双网卡绑定实战教程

文章目录 双剑合璧&#xff0c;网络无敌&#xff01;Windows Server 2012 R2双网卡绑定实战教程1 背景信息2 配置步骤2.1 登录服务器2.2 分别清除两块网卡的配置2.3 进入“本地服务器”界面2.4 进入“NIC组合”界面2.5 创建网卡绑定组2.6 设置新建组参数2.7 查看已创建的网卡组…

【kubernetes】k8s配置资源管理

一、ConfigMap资源配置 ConfigMap保存的是不需要加密配置的信息 ConfigMap 功能在 Kubernetes1.2 版本中引入&#xff0c;许多应用程序会从配置文件、命令行参数或环境变量中读取配置信息。ConfigMap API 给我们提供了向容器中注入配置信息的机制&#xff0c;ConfigMap 可以被…