Get length of items in carousel when carousel is created in a loop

[jephjohnson]

I am creating multiple carsouels in a loop based off an array of data.

return (
    <>
      {sportsEvents.length > 1 &&
        sportsEvents.map((item, ix) => {
          return (
            // eslint-disable-next-line react/no-array-index-key
            <NukaCarousel data-user={ix} key={ix} {...settings}>
              {item.map((el, idx) => (
                // eslint-disable-next-line react/no-array-index-key
                <SmallTile key={idx} data={el} />
              ))}
            </NukaCarousel>
          )
        })}
    </>
  )

In my previous and next event handlers how can I go about getting the length of the items in the particular carousel I am on?

Say If my first carousel has 10 items, next has 20 items...etc. How do I get referece to this? Passing a custom prop or slidesCount does not work.

renderCenterRightControls: ({ nextSlide, slidesCount }) => {

      console.log("slidesCount====", slidesCount) <-----does not work

      return (
        <button
          className={clsx(
            classes.btn,
            classes.btnRight,
            size === "small" ? classes.small : ""
          )}
          type="button"
          onClick={nextSlide}
          aria-label="back btn"
        >
          <ChevronRightIcon className={clsx(classes.arrow)} />
        </button>
      )
    },

[ValGeorgiev]

Hey @jephjohnson thanks for raising this with us, I will try to reproduce it and fix it asap

[jephjohnson]

Hi @ValGeorgiev - This seems to resolve my issue. If the items length is less then "slidestoshow" then dont show the "next" or if the the carousel is at the end up the list hide the "next" button.

Update: I noticed I misspelled the prop. It should be "slideCount" not "slidesCount"

This worked: ....

const slidesToShow = 5
  // const slider = useRef()
  const settings = {
    dots: true,
    speed: 500,
    slidesToShow,
    slidesToScroll: 5,
    centerMode: false,
    infinite: false,
    dragging: false,
    arrows: true,
    centerPadding: 50,
    renderBottomCenterControls: null,
    heightMode: "max",
    swiping: false,
    cellSpacing: 5,
    framePadding: "0 40px 0px 40px",
    frameOverflow: "0 40px 0px 40px",
    renderCenterLeftControls: ({ previousSlide, currentSlide }) => {
      return currentSlide === 0 ? null : (
        <button
          className={clsx(classes.btn, classes.btnLeft, classes.small)}
          type="button"
          onClick={previousSlide}
          aria-label="back btn"
        >
          <ChevronLeftIcon className={clsx(classes.arrow)} />
        </button>
      )
    },
    renderCenterRightControls: ({ nextSlide, slideCount, currentSlide }) => {
      return slideCount - currentSlide === slidesToShow ||
        slideCount <= 5 ? null : (
        <button
          className={clsx(classes.btn, classes.btnRight, classes.small)}
          type="button"
          onClick={nextSlide}
          aria-label="back btn"
        >
          <ChevronRightIcon className={clsx(classes.arrow)} />
        </button>
      )
    },
  }
....