antd跑马灯实现左右箭头切换(React版本)

房东太太的猫

已于 2023-03-10 09:07:53 修改

阅读量1.5k

点赞数 3

文章标签： react.js 前端前端框架 Powered by 金山文档

于 2023-03-09 18:11:33 首次发布

本文链接：https://blog.csdn.net/qq_37655448/article/details/129428070

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章展示了如何在React应用中使用antd库创建轮播图，并在antd默认功能基础上自定义添加左右点击切换的功能。通过设置ref并绑定onClick事件，实现了手动切换轮播图的效果。

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

我们在查找antd官网，使用轮播图的时候，发现左右点击切换轮播图被去掉了，这个功能也没有。既然没有那就实现一个吧。

效果：

react部分代码

import React, { useRef } from 'react'
import { Carousel } from 'antd';
import styles from './index.less'

const Screen = () => {
    const myRef = useRef(null);
    return (
        <div className={styles.wrap}>
            <div className={styles.btnLeft} onClick={() => { myRef?.current?.prev?.() }}>&lt;</div>
            <div className={styles.btnRight} onClick={() => { myRef?.current?.next?.() }}>&gt;</div>
            <Carousel autoplay effect="fade" ref={myRef} dots={false}  >
                <div>
                    <div key={'1'} className={styles.content1} >111</div>
                </div>
                <div>
                    <div key={'2'} className={styles.content2} >222</div>
                </div>
                <div>
                    <div key={'3'} className={styles.content3} >333</div>
                </div>
                <div>
                    <div key={'4'} className={styles.content4} >444</div>
                </div>
            </Carousel>
        </div>

    )
}

export default Screen

index.less

.wrap {
    height: 100vh;
    position: relative;

    :global(.ant-carousel .slick-prev,
        .ant-carousel .slick-next,
        .ant-carousel .slick-prev:hover,
        .ant-carousel .slick-next:hover) {
        font-size: inherit;
        color: currentColor;
    }

    .content1 {
        margin: 0;
        height: 100vh;
        color: white;
        text-align: center;
        background: #364d79;
        line-height: 100vh;
    }

    .content2 {
        margin: 0;
        height: 100vh;
        color: white;
        text-align: center;
        background: #364d79;
        line-height: 100vh;

    }

    .content3 {
        margin: 0;
        height: 100vh;
        color: white;
        text-align: center;
        background: #364d79;
        line-height: 100vh;

    }

    .content4 {
        margin: 0;
        height: 100vh;
        color: white;
        text-align: center;
        background: #364d79;
        line-height: 100vh;

    }


    .btnLeft {
        position: absolute;
        top: 50%;
        left: 15px;
        color: white;
        font-size: 40px;
        z-index: 10;
        cursor: pointer;
    }

    .btnRight {
        position: absolute;
        top: 50%;
        right: 15px;
        color: white;
        font-size: 40px;
        z-index: 10;
        cursor: pointer;
    }
}