0

我遵循了演示代码,除了thumbnails. 我将其设置为,以便我可以看到intrue的 'ul' ,但它没有任何.thumbnailshtmlimage src

这是下面的代码。

import React from 'react';

import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

import Image from 'next/image';

const Banner = ({ carousel, isDifferent, className }) => {
  return (
    <div>
      <Carousel autoPlay infiniteLoop showThumbs>
        {carousel.length !== 0 &&
          carousel?.map((item, idx) => (
            <div className={`relative w-full ${className} cursor-pointer`} key={idx}>
              <Image src={isDifferent ? item?.node?.mediaItemUrl : item.node.bannerInfo.bannerImage.mediaItemUrl} alt="banner" objectPosition="center top" layout="fill" objectFit="cover" priority />
            </div>
          ))}
      </Carousel>
    </div>
  );
};

export default Banner;

这就是我使用Banner组件的方式

      <Banner carousel={product.galleryImages.edges} isDifferent className="md:hidden h-[400px]" />

当我检查开发工具时,我看到了ul.

在此处输入图像描述

请让我知道我错过了什么。

4

0 回答 0