next.js 无限模式下React-Multi-Carousel的Data-index不正确

67up9zun 于 2023-06-22 发布在 React

关注(0)|答案(1)|浏览(94)

我想使中间项目（活动项目）的旋转木马滑块比其他大。喜欢下面的图片x1c 0d1x
所以我使用了react-multi-carousel的回调函数

<Carousel
              className="relative"
              responsive={responsiveCarouselTournamentBanner}
              // autoPlay={true}
              autoPlaySpeed={3000}
              infinite
              arrows={false}
              itemClass="custom-item-class"
              // centerMode={true}
              slidesToSlide={1}
              beforeChange={(nextSlide, current) => {
                console.log("Before Change: ", nextSlide, "Current: ", current)
                setSlideIndex(nextSlide)
              }}
              // containerClass={`${
              //   slideIndex % 2 === 0 ? "custom-container-odd" : "custom-container-even"
              // }`}
            >
              {data?.banners?.map((item, index) => (
                <img
                  key={index}
                  data-index={index}
                  src={item || "/images/tournament-img-default.png"}
                  className="w-full max-w-[90%] h-[210px] md:max-w-[858px] md:h-[482px] object-cover mx-auto rounded-xl banner-primary-color"
                  alt="dgg-banner"
                />
                // <div key={index}>ABC</div>
              ))}
            </Carousel>

像这样。我想使用nextSlide中的slideIndex，beforeChange中的current。但在无限模式下，总项目数将增加一倍。我不能控制我的项目在carousel。
所以我想问我的问题来处理像这样的旋转木马的情况。非常感谢。我为这个问题挣扎了一个星期。

next.js

来源：https://stackoverflow.com/questions/76436763/data-index-of-react-multi-carousel-in-infinity-mode-is-not-true

1条答案

按热度按时间

m0rkklqb1#

要创建中间有较大活动项目的轮播/滑块，可以修改代码以达到所需的效果。这里有一个例子，说明你可以如何处理它：
首先，定义转盘的响应设置：

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

然后，在JSX代码中，使用beforeChange回调来更新活动幻灯片索引，并根据活动幻灯片调整样式：

<Carousel
  className="relative"
  responsive={responsiveCarouselTournamentBanner}
  autoPlay={true}
  autoPlaySpeed={3000}
  infinite
  arrows={false}
  itemClass="custom-item-class"
  centerMode
  centerSlidePercentage={80}
  slidesToSlide={1}
  beforeChange={(nextSlide, currentSlide) => {
    setSlideIndex(nextSlide);
  }}
>
  {data?.banners?.map((item, index) => (
    <div
      key={index}
      className={`${
        slideIndex === index ? 'active-slide' : ''
      } custom-slide`}
    >
      <img
        src={item || '/images/tournament-img-default.png'}
        className="w-full h-[210px] md:h-[482px] object-cover mx-auto rounded-xl banner-primary-color"
        alt="dgg-banner"
      />
    </div>
  ))}
</Carousel>

您可以将CSS样式添加到活动幻灯片和自定义幻灯片类，以控制活动和非活动幻灯片的外观。
确保根据您的特定要求和设计调整代码和样式。

赞(0）回复(0）举报 2023-06-22

我来回答

next.js 无限模式下React-Multi-Carousel的Data-index不正确

1条答案

相关问题

热门标签

最新问答