react carousel

🧙 Questions

☄️ Ideas

import {Carousel} from "antd";
import React from "react";
import './style/Home.scss'
import {useNavigate} from "react-router-dom";

const carousels = [
  {
    name: 'todo',
    img: 'https://img.isxcode.com/leo/todo.png',
    url: '/todo'
  },
  {
    name: 'note',
    img: 'https://img.isxcode.com/leo/note.png',
    url: '/note'
  }
];

export default function Home() {

  const history = useNavigate();

  return <>
    <Carousel className={"leo-home-carousel"} autoplay autoplaySpeed={10000} dots={false}>
      {
        carousels.map((item, index) => {
          return <img className={"leo-home-carousel-img"}
                      src={item.img}
                      onClick={() => history(item.url)}
                      alt={item.name}
                      key={index}/>;
        })
      }
    </Carousel>
  </>;

};

.ant-carousel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 90%;

    .leo-home-carousel {
        .leo-home-carousel-img {
            width: 50% !important;
            position: relative;
            left: 25%;
            float: left;
        }
    }
}

🔗 Links

• react docs