[React] Carousel(캐러셀) 구현

js>

import React from "react";
import {Button, Carousel} from "antd";
import { LeftCircleOutlined, RightCircleOutlined } from "@ant-design/icons";
import "../css/Carousel.css";

const Carousel = () => {
    const settings = {
        dots: true,
        prevArrow: <CustomPrevArrow />,
        nextArrow: <CustomNextArrow />,
    };
    
    return (
        <div className="custom-carousel-container">
            <Carousel {...settings}>
                <div>
                   // 캐러셀 기능 구현할 내용
                </div>
            </Carousel>
        </div>
    );
};

const CustomPrevArrow = (props) => {
    const { className, onClick } = props;
    return (
        <div className={`custom-carousel-button custom-prev ${className}`} onClick={onClick}>
            <LeftCircleOutlined />
        </div>
    );
};

const CustomNextArrow = (props) => {
    const { className, onClick } = props;
    return (
        <div className={`custom-carousel-button custom-next ${className}`} onClick={onClick}>
            <RightCircleOutlined />
        </div>
    );
};

export default Carousel;

 

css>

.custom-carousel-container {
    width: 300px;
    margin: 0 auto;
}

.slick-dots {
    text-align: center;
    margin-top: 10px;
}

.slick-dots li {
    display: inline;
    margin: 0 5px;
    cursor: pointer;
}

.slick-dots li button {
    border: none;
}

.slick-dots li button::before {
    margin-top: 20px;
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid #1890ff;
    background-color: #4A5BF6;
    border-radius: 50%;
    display: block;
}

 

 

위 코드를 실행하면...

 

1

2

3

 

이렇게 원 순서대로 1->2->3 콘텐츠가 슬라이드되며 구현됩니다!

😊😊