Image displayed is not matching with the index parameter

[BarthelemyPassinCauneau]

Describe the bug I'm giving to the carousel the index parameter since I want to totally control the carousel. The bug is if I slide the carousel but for some external reason in my program I dont want the index to change, the image will still change but the arrows and dot buttons will still be corrects and remains at the right index.

To Reproduce Steps to reproduce the behavior:

1. Declare a variable to store the index and give it to the carousel
2. Do not update this variable in the callback onIndexChange
3. See error : the image is still changing while the arrows and buttons are not following the same behavior and remains at the index passed in the component.

Expected behavior Since the props index is passed, the displayed image should follow the index and shouldn't have it's own behavior.

Desktop:

• OS: Windows 10
• Browser: Opera GX

[yifaneye]

Hi @BarthelemyPassinCauneau ! Thank you for raising this issue!

I will check it tomorrow!

[yifaneye]

Hi @BarthelemyPassinCauneau !

I think I understood this issue. The index prop for specifying the initial index. I am sorry that I did not make this clear in the documentation. I think it is not possible to totally control the carousel as of now.

[acewebs]

Hi! @BarthelemyPassinCauneau I assume you could instead use the goToIndex(index) on ref instead of passing the index as a prop. As an example:

 const carouselRef = useRef(null);

  const openGalleryAtIndex = (index) => {
      console.log('index is..', index);
      if (carouselRef.current !== null) {
          carouselRef.current.goToIndex(index);
          carouselRef.current.maximize();
      }
  };

....
 <Carousel ref={carouselRef} />

[yifaneye]

Hi @acewebsolutions ! Thanks for your suggestions! 😀