themesberg
Setting Active Image In the Slider
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';
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".
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.
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.
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.
what about a ref that we can use with ref.current.slideTo(index) ?
<Carousel carouselRef={ref} />
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])
Please add slideTo as it's available in the original flowbite https://flowbite.com/docs/components/carousel/#methods
As a workaround I ended up with this...
...
const carouselRef = useRef(null);
const slideTo = (i: any) => {
if(!carouselRef.current)
return;
const indicators = (carouselRef.current as any).querySelectorAll('[data-testid="carousel-indicator"]');
if (indicators && indicators[i]) {
indicators[i].click();
}
}
return (
<>
<div className={"h-56 sm:h-64 xl:h-80 2xl:h-96"}>
<Carousel
ref={carouselRef}
...
