antd走马灯组件自定义前进后退按钮【ts + react】

antd的Carousel没有提供前进后退按钮需要自己根据文档实现此功能

官方提供了next 和prev两个方法

next()   切换到下一面板
prev()  切换到上一面板

代码如下：

import React from "react";
import "./Detail.less";
import { Carousel,Image } from 'antd';
import {LeftOutlined,RightOutlined} from "@ant-design/icons"
//引入底部组件
class Detail extends React.Component<any, any>{private img: any;constructor(props:any){super(props);this.state={};this.img = undefined}prev(){this.img.prev();}next(){this.img.next();}render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {let {location} = this.props;return (<div className={'ContentBox'}><div className={'CarouselBox'}><div className={"CarouselIcon"} onClick={this.prev.bind(this)}><LeftOutlined /></div><Carousel autoplay className={'Carousel'} ref={dom => { this.img = dom; }}><div><img src={require('../../assets/images/Home/banner1.png')} alt=""/></div><div><img src={require('../../assets/images/Home/banner2.png')} alt=""/></div><div><img src={require('../../assets/images/Home/banner3.png')} alt=""/></div><div><img src={require('../../assets/images/Home/banner4.png')} alt=""/></div></Carousel><div className={"CarouselIcon"}  onClick={this.next.bind(this)}><RightOutlined /></div></div></div>);}}
export default Detail

antd走马灯组件自定义前进后退按钮相关推荐

基于Antd Input组件自定义Input的成功状态
前言 Ant Design的Input组件的有一个状态的Api 需求公司自研UI组件,在Antd的基础上进行开发.其中Input组件除了警告与错误状态外,还增加了成功的状态.如下图⬇️ 开发实现方 ...
antd Tabs组件自定义头部
antd的Tabs组件,用renderTabBar自定义TabBar. 直接上代码: import React, { Fragment, useEffect, useState, useRef } f ...
antd 轮播图样式_React - AntD 走马灯组件前后切换面板
1.先用AntD的图标来当做轮播图点击的两个按钮,并将Carousel与按钮放在一个父级下. 轮播图切换按钮 (this.slider = el)}> 1 2 3 4 2.轮播图的配置lunbo ...
antd tree组件自定义图标
把树的小三角替换为自定义图标,如下图效果 //小三角收起的背景图设置 ant-tree-switcher_close { width: 16px !important; height: 15px !i ...
swiper组件如何自定义分页符和前进后退按钮
前提今天产品提了这样一个需求:用户在首次登录后,要展示一个引流的轮播图,其内容主要是对新功能的图文说明(类似于王者荣耀每次更新时的内容一览轮播图,如下图所示).如果非首次登录,则让它隐藏掉即可.注: ...
如何隐藏iPhone导航栏上的“后退”按钮？
本文翻译自:How to hide 'Back' button on navigation bar on iPhone? I added a navigation control to switch ...
Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
Vue组件学习之组件自定义事件
主要介绍组件的自定义事件的概念,使用等. 何为组件自定义事件: 组件自定义事件是一种组件间的通信方式,方向是子组件====>父组件. 使用场景:A是子组件,B是父组件,如果要把B的数据传给A, ...
Android Fragment手柄后退按钮按下[重复]
本文翻译自:Android Fragment handle back button press [duplicate] This question already has answers here : ...

antd走马灯组件自定义前进后退按钮

antd走马灯组件自定义前进后退按钮【ts + react】

antd走马灯组件自定义前进后退按钮相关推荐

最新文章

热门文章