Issues with 3d automatic transformation

[bloodylupin]

Hola,

I made a custom slider that only works with API (no drag) that has a class system to determine the position and rotation of my slides. When I first load the page the slider works with no problems. If I resize the page, embla adds a 3d tranfsormation on the style of the container and sometimes on the children slides that messes up with all the custom transformations. I managed to remove the style attribute on the container on resize, but the same script doesn't work with children slides.

That's the custom hook I am using

import {useState, useCallback, useEffect} from 'react';

import useEmblaCarousel from 'embla-carousel-react';

function useSingleSlider(sliderApi) {
  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
  const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(0);

  const scrollPrev = useCallback(
    () => sliderApi && sliderApi.scrollPrev(),
    [sliderApi],
  );
  const scrollNext = useCallback(
    () => sliderApi && sliderApi.scrollNext(),
    [sliderApi],
  );

  const onSelect = useCallback(() => {
    if (!sliderApi) return;
    setSelectedIndex(sliderApi.selectedScrollSnap());
    setPrevBtnEnabled(sliderApi.canScrollPrev());
    setNextBtnEnabled(sliderApi.canScrollNext());
  }, [sliderApi, setSelectedIndex]);

  useEffect(() => {
    if (!sliderApi) return;
    onSelect();
    sliderApi.on('select', onSelect);
    sliderApi.on('reInit', onSelect);
  }, [sliderApi, onSelect]);

  useEffect(() => {
    if (!sliderApi) return;
    // console.log(selectedIndex);
    const slides = sliderApi.containerNode().children;
    if (slides.length === 0) return;
    const centerSlide = slides[selectedIndex];
    const enteringSlide =
      slides[
        selectedIndex > 1
          ? selectedIndex - 2
          : slides.length - 2 + selectedIndex
      ];
    const prevSlide =
      slides[selectedIndex > 0 ? selectedIndex - 1 : slides.length - 1];
    const nextSlide =
      slides[selectedIndex + 1 < slides.length ? selectedIndex + 1 : 0];
    const exitingSlide =
      slides[
        selectedIndex + 2 < slides.length
          ? selectedIndex + 2
          : selectedIndex - slides.length + 2
      ];

    centerSlide.classList.add('center-slide');
    enteringSlide.classList.add('entering-slide');
    prevSlide.classList.add('prev-slide');
    nextSlide.classList.add('next-slide');
    exitingSlide.classList.add('exiting-slide');

    sliderApi.on('resize', () => {
      document.querySelector('.slider__container').removeAttribute('style');
      document
        .querySelectorAll('.slider__slide')
        .forEach((slide) => slide.removeAttribute('style'));
    });

    return () => {
      centerSlide.classList.remove('center-slide');
      enteringSlide.classList.remove('entering-slide');
      prevSlide.classList.remove('prev-slide');
      nextSlide.classList.remove('next-slide');
      exitingSlide.classList.remove('exiting-slide');
    };
  }, [sliderApi, selectedIndex]);

  return {
    prevBtnEnabled,
    nextBtnEnabled,
    scrollPrev,
    scrollNext,
    selectedIndex,
  };
}

export default function useSlider(
  options = {
    loop: true,
    speed: 100,
    draggable: false,
  },
) {
  const [sliderContainerRef, sliderApi] = useEmblaCarousel(options);
  const {
    prevBtnEnabled,
    nextBtnEnabled,
    scrollPrev,
    scrollNext,
    selectedIndex,
  } = useSingleSlider(sliderApi);
  return {
    sliderContainerRef,
    prevBtnEnabled,
    nextBtnEnabled,
    scrollPrev,
    scrollNext,
    selectedIndex,
  };
}

Is it possible to deactivate the 3d translation?

Thanks in advance for the help!

[davidjerleke]

Hi @bloodylupin,

Embla reads slide sizes when it initializes and when sizes change. For this to work properly you need to disable any transforms on your slides and container that affects their sizes or positions before it re-initializes (for example, when resized).

One example that solves this is the iOS picker on the examples page. It disables Embla transforms. Look for the disableEmblaTransform function or similar.

The order of things that need to happen has to be the following on every re-initialization or resize:

1. Remove all transforms on slides and the container that affects their sizes or positions in any way.
2. Run embla.reInit().
3. Inactivate Embla transforms.
4. Add back your own transforms.

Please note that the examples are using the latest version of Embla which is v8.0.0-rc01. The new watchResize option might be useful to you.

Best,
David

[bloodylupin]

hi @davidjerleke and thank you so much for your answer, I managed to achieve the wanted result by adding the inactivateEmblaTransform function from the example you provided before adding the classes for the transfomation and added the same function call to the resize event from the API, again thank you so much for the help!