React-Multi-Carousel 在无限模式下的数据索引不正确

Question

我想制作中间项目（活动项目）比其他项目更大的轮播滑块。就像下面这张图一样

所以我使用了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>

像这样。我想在 beforeChange 中使用 nextSlide,current 中的 SlideIndex。但在无限模式下，totalItems 将会翻倍。而且我无法控制轮播中的物品。

所以我想问我的问题来处理像这样的轮播案例。非常感谢。我为这个问题苦苦挣扎了一个星期。

Answer 1

我有同样的问题这里（GitHub）！

为了解决这个问题，我创建了一个解析活动幻灯片（changeSlide）的函数。仅当轮播设置为 ltr（默认设置）时它才有效。我正在使用 Tailwind，所以你可能也想看看。

const responsive = {
    superLargeDesktop: {
        // the naming can be any, depends on you.
        breakpoint: { max: 4000, min: 3000 },
        items: 1
    },
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 1
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 1
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1
    }
};
const [activeIndex, setActiveIndex] = useState(0)
const images = [
    {
        src: slide1,
        alt: "",
    },
    {
        src: slide2,
        alt: "",
    },
    {
        src: slide3,
        alt: "",
    },
    {
        src: slide4,
        alt: "",
    },
]
const changeSlide = (previousSlide: number, currentSlide: number, dataSize: number) => {
    let activeSlide = 0
    // right arrow
    if (previousSlide < currentSlide) activeSlide = currentSlide - 2 === dataSize ? 0 : currentSlide - 2
    // left arrow
    else activeSlide = currentSlide + (currentSlide <= dataSize && currentSlide >= 2 ? -2 : dataSize - 2);
    setActiveIndex(activeSlide)
}

轮播应该是这样的：

<Carousel
    infinite
    autoPlay
    centerMode
    responsive={responsive}
    className="w-full h-[70%] owl-carousel owl-theme text-center"
    itemClass="px-1 flex justify-center"
    keyBoardControl={true}
    // changeSlide(previousSlide, currentSlide, dataSize = images.length)
    afterChange={(previousSlide, { currentSlide }) => changeSlide(previousSlide, currentSlide, images.length)}
>
    {images.map((img, i) => (
        <div
            key={`slide-${i}`}
            className={`relative ${activeIndex !== i ? "w-[90%]" : "w-full"} h-full rounded-[10px] flex justify-center items-center bg-transparent shadow-[10px_40px_10px_5px_black]`}
        >
            {activeIndex !== i ?
                <img
                    className='pointer-events-none object-contain rounded-[10px] opacity-10'
                    src={img.src}
                    alt={img.alt}
                />
                :
                <img
                    key={`slide-img-${activeIndex}`}
                    className='object-contain rounded-[10px]'
                    src={img.src}
                    alt={img.alt}
                />
            }
        </div>
    )
    )}
</Carousel>

我希望这有帮助！

Answer 2

要创建中间有较大活动项目的轮播/滑块，您可以修改代码以达到所需的效果。以下是如何实现它的示例：

首先，定义轮播的响应式设置：

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 样式，以控制活动和非活动幻灯片的外观。

确保根据您的具体要求和设计调整代码和样式。