Setting Active Image In the Slider

[technotip]

We can programatically set the active image: https://flowbite.com/docs/components/carousel/#default-slider

But the same is not available in flowbite react: https://www.flowbite-react.com/docs/components/carousel

Can we please get this in React too?

Expected Behaviour: When we set data-carousel-item="active" or something similar on any image, that image should be shown in the carousel and not from index 0.

I am using: import { Carousel } from 'flowbite-react';

[technotip]

I see that setting data-carousel-item="active" does work partially. i.e., the indicator points to the correct active image. But the image itself still shows the 0th index image on the carousel instead of the image which is set as "active".

[technotip]

Expected Changes:

The active={true | false} should be present on all the img tags, which are inside <Carousel></Carousel>. That way the library can pickup the active image to show on the canvas/Carousel and then change the indicators accordingly.

[rluders]

Not sure if adding active={boolean} to every single img or div or whatever content is desirable, instead, the best approach, IMHO, would be to add the activeSlide={number} to the Carousel component.

[kurtisdunn]

Just as a bump, i too was about to use the react comp and ended up making my own from the JS version. Underneath the carousel I wanted to show thumbnails and set state to jump to the active image.

activeSlide={number} would be the best approach here.

[xegulon]

what about a ref that we can use with ref.current.slideTo(index) ?

<Carousel carouselRef={ref} />

[cristiantiradob]

@tulup-conner @rluders hey check this out #1214

[ArthurJahn]

Any updates? Do you guys plan to review/approve #1214 ?

[enzoimola]

Any updates guys?

[wellitongervickas]

Any news?

[wellitongervickas]

Guys, to fix that, I wrote the "REF" in the parent component, and scroll to left using the "item" size. Eg:

  useEffect(() => {
    const slider = carouselParentRef?.current?.children?.[0]?.children?.[0]
    if (slider) {
      slider.scrollLeft = activeSliderIndex * colsSize.width
    }
  }, [activeSliderIndex, colsSize.width])