[Help]: Is there a way to create 2 fully synchronized carousels?

[7iomka]

I tried this

 const [selectedIndex, setSelectedIndex] = useState(0);
  const [scrollProgress, setScrollProgress] = useState(0);

  const [embla, setEmbla] = useState<EmblaCarouselType | null>(null);
  const [emblaReflection, setEmblaReflection] = useState<EmblaCarouselType | null>(null);

  const handleScroll = useCallback(() => {
    if (!embla || !emblaReflection) return;
    const progress = Math.max(0, Math.min(1, embla.scrollProgress()));
    setScrollProgress(progress * 100);
    emblaReflection.scrollTo(embla.selectedScrollSnap());
  }, [embla, emblaReflection, setScrollProgress]);

  const handleSelect = useCallback(() => {
    if (!embla || !emblaReflection) return;
    setSelectedIndex(embla.selectedScrollSnap());
    emblaReflection.scrollTo(embla.selectedScrollSnap());
  }, [embla, emblaReflection, setSelectedIndex]);


  useEffect(() => {
    if (!embla) return;
    handleSelect();
    embla.on('select', handleSelect);

    embla.on('scroll', handleScroll);
    handleScroll();

    return () => {
      embla.off('select', handleSelect);
      embla.off('scroll', handleScroll);
    };
  }, [embla, handleSelect, handleScroll]);

So, in this case when I scroll the first (embla) carousel by hand or somehow else - I want to have the same scroll progress in the second carousel (emblaReflection).
Of course, I tried to store scrollProgress in the state, but in v8 I don't found any method to set carousel progress.
So, currently the 2nd carousel just changes active slide, when the first one has changed it, and this is not that I expect from fully synchronized carousels.

Please, help me with this trivial task.

[davidjerleke]

Hi @7iomka,

Do you want carousel A to follow carousel B, or do you want both carousel A to follow B and B to follow A?

Best,
David

[7iomka]

Hi @davidjerleke
I would like to see the the second case, because I want full synchronization between both carousels and this example would be more common that the first one: Independent to what carousel is triggered (scrolling left/right, change slide by navigation or somehow else), both needed to have the same state.
In my realword case I have layout with

• image
• image reflection
• thumbnails
  User can can scroll image carousel, and need to see that image reflection carousel is scrolled by exactly the same value and same way immediately when this change occurs (because it is reflection :-) )
  Thumbnails it is just list with length of slides count, with onclick handler, that change index of one of available carousels.
  Currently image reflection carousel is not accessible by design, but if this case occurs in the future with 2 accessible carousels, I need to know how to also cross-sync it.

Thanks!

[davidjerleke]

Thanks for the additional details @7iomka. I also want to know if carousel A will be equal to carousel B in terms of width, number of slides and all other aspects?

[7iomka]

Thanks for the additional details @7iomka. I also want to know if carousel A will be equal to carousel B in terms of width, number of slides and all other aspects?

As for the number of elements in the carousel - it is required for synchronization - that it should be the same for synchronized carousels.
About slide sizes -
the main idea is to keep the scroll percentage without depending on static values.
In my particular case, the carousel with reflection has the same container size as the main carousel.
In other cases this may not be a requirement.

[7iomka]

@davidjerleke Hi)
Did you manage to make an example according to my wishes or is it impossible to do it in the current implementation)?

[davidjerleke]

@7iomka it’s definitely possible to achieve with the help of emblaApi.internalEngine() method but I simply haven’t had the time to look into it.

I’m sorry if this makes you disappointed but I can’t tell you when I will have the time to look into this. I’m the sole developer on this project and I have a ton to do before the stable v8 release. This is a special request that isn’t part of the public API and therefore the priority is low.

Anyone who wants help with a special request fast can’t expect me to spend even more of my unpaid spare time than I already do on this project. The only way I will help someone out fast with their special request is if they make an agreement with me and pay me for my time.

Thank you for understanding.

Best,
David