React Multi 轮播显示图像的全宽

Question

我有 5 张图像想要在 React 多轮播中使用，但问题是我希望它们不要像下图所示的轮播中那样被剪切。我还想使用自定义图像作为箭头。有什么解决办法吗？

index.tsx

import styles from "./styles.module.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

import Head from "next/head";

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

export default function quickGuide() {
  return (
    <>
      <Head>
        <title>Quick Guide</title>
        <meta key="description" name="description" content="quick-guide" />
      </Head>
      <div className={`flex h-[100vh] text-white ${styles.carouselContainer}`}>
        <Carousel
          responsive={responsive}
          containerClass={`w-[90%] mx-auto`}
          itemClass={styles.items}
        >
          <div>
            <img src={"/assets/slides/Slide-1.png"} />
          </div>
          <div>
            <img src={"/assets/slides/Slide-2.png"} />
          </div>
          <div>
            <img src={"/assets/slides/Slide-3.png"} />
          </div>
          <div>
            <img src={"/assets/slides/Slide-4.png"} />
          </div>
          <div>
            <img src={"/assets/slides/Slide-5.png"} />
          </div>
        </Carousel>
      </div>
    </>
  );
}

styles.module.css

.carouselContainer {
  background: url(../../../public/assets/misc/carousel-bg.png) no-repeat #031316
    center center/cover;
}

.items {
  width: 80%;
  margin: 10px;
  background: transparent;
}

结果：

我想要实现的是：

Answer 1

您可以使用库的 customArrows 属性添加自定义箭头。不过，您可以使用您选择的任何箭头图标。

    <Carousel
      arrows
      containerClass="container"
      customLeftArrow={
        <FontAwesomeIcon
          icon={faChevronLeft as IconProp}
          size="lg"
          className="absolute top-1/2 left-4 max-w-4 cursor-pointer text-primary-400"
        />
      }
      customRightArrow={
        <FontAwesomeIcon
          icon={faChevronRight as IconProp}
          size="lg"
          className="absolute top-1/2 right-4 max-w-4 cursor-pointer text-primary-400"
        />
      }
      slidesToSlide={1}
      swipeable
    />

在 github 论坛上找到了这个。

React Multi 轮播显示图像的全宽

问题描述投票：0回答：1

1个回答

最新问题

React Multi 轮播显示图像的全宽

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1