我遵循了演示代码,除了thumbnails
. 我将其设置为,以便我可以看到intrue
的 'ul' ,但它没有任何.thumbnails
html
image 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
.
请让我知道我错过了什么。