ant design 走马灯组件自定义箭头

最新推荐文章于 2023-12-07 09:20:53 发布

晚风..~

最新推荐文章于 2023-12-07 09:20:53 发布

阅读量681

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_44727218/article/details/129091097

版权

文章详细描述了在AntDesign的Carousel组件中如何添加自定义箭头功能。作者遇到官方参考链接中的方法不可用的问题，通过修改jsx和CSS代码，实现了使用Button组件作为箭头并绑定官方API来控制轮播图的前后滑动。代码示例包括jsx的Button和Carousel配置，以及对应的CSS样式调整。

摘要由CSDN通过智能技术生成

组件代码参考没有左右箭头，官方给了参考链接，实测不可用Carousel走马灯增加自定义arrow功能 · Issue #12479 · ant-design/ant-design · GitHub

经过修改实测可用

jsx部分

导入组件

import React from 'react';
import { Carousel, Button } from 'antd';
import { LeftOutlined, RightOutlined } from "@ant-design/icons";

创建变量

const carouselEL = React.createRef()

const contentStyle = {
    width: '100vw',
    height: '100vh',
    color: '#fff',
    lineHeight: '80vh',
    textAlign: 'center',
    background: '#364d79',
    marginLeft: "50%",
    transform: 'translateX(-50%)',
    cursor: 'pointer'
  };

<div style={{ position: 'relative' }}>
        <Button
          className='btnstyle'
          style={{ left: 50 }}
          onClick={() => {

            carouselEL.current.prev();
          }}
          icon={<LeftOutlined />}
        ></Button>
        <Button
          className='btnstyle'
          style={{ right: 50 }}
          onClick={() => {

            carouselEL.current.next();
          }}
          icon={<RightOutlined />}
        ></Button>
        <Carousel ref={carouselEL} autoplay>


          <div>
             <img style={contentStyle} src="/assets/img/home/p1.jpg"></img>
          </div>
          <div>
            <img style={contentStyle} src="/assets/img/home/p2.jpg"></img>
          </div>
          <div>
            <img style={contentStyle} src="/assets/img/home/p3.jpg"></img>
          </div>

        </Carousel>
      </div>

注意：图片链接记得改

通过button点击事件调用官方api

css部分

.btnstyle {
    border: none!important;
    height: 45px!important;
    width: 45px!important;
    transition: 1s!important;
    border-radius: 50%!important;
    background-color: #F5F6F8!important;
    color: #ff0000!important;
    position: absolute!important;
    top: 45%!important;
    z-index: 10!important;
    transform: translateY(-50%)!important;
    opacity: 0.6!important
}
.btnstyle:hover {
    opacity: 1!important
}