zksy-website-front/src/components/bannerCarousel.tsx

"use client"
import React from 'react';
import {Carousel, ConfigProvider} from "antd";
import Image from "next/image";

function BannerCarousel() {
  return (
    <>
      <ConfigProvider
        theme={{
          components: {
            Carousel: {
              arrowSize:28,
            }
          }
        }}
      >
        <div className={"hidden sm:block"}>
          <Carousel
            autoplay
            autoplaySpeed={3000}
            arrows
            dots={{
              className: "bottom-4"
            }}
          >
            <div>
              <div className="w-full bg-blue-500 flex items-center justify-center text-white text-4xl font-bold">
                <Image src={"/assets/home/1.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
              </div>
            </div>
            <div>
              <div className="w-full bg-green-500 flex items-center justify-center text-white text-4xl font-bold">
                <Image src={"/assets/home/2.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
              </div>
            </div>
            <div>
              <div className="w-full bg-red-500 flex items-center justify-center text-white text-4xl font-bold">
                <Image src={"/assets/home/3.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
              </div>
            </div>
          </Carousel>
        </div>

        <div className={"sm:hidden"}>
          <Carousel
            autoplay
            autoplaySpeed={3000}
            arrows
            dots={{
              className: "bottom-4"
            }}
          >
            <div>
              <div className="w-full bg-blue-500 flex items-center justify-center text-white text-4xl font-bold">
                <Image src={"/assets/home/5.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
              </div>
            </div>
            <div>
              <div className="w-full bg-green-500 flex items-center justify-center text-white text-4xl font-bold">
                <Image src={"/assets/home/6.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
              </div>
            </div>
            <div>
              <div className="w-full bg-red-500 flex items-center justify-center text-white text-4xl font-bold">
                <Image src={"/assets/home/7.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
              </div>
            </div>
          </Carousel>
        </div>
      </ConfigProvider>
    </>
  );
}

export default BannerCarousel;