[Help]: Vertically scroll the next slide make the previous slide move up and down, looks very floppy.

[xnslx]

Summary

I want to implement embla-carousel to mock the site of Zara. Horizontal scroll combined with vertical scroll. (The UX is terrible, just for fun). I am nearly done, but from the demo video, you can see that when you swipe down using the keypad or click the button, the current slide/image will move up and down which makes the animation look very floppy. What I expect is that when swipe down to another image vertically, the current image does not move at all. I am using this answer as a reference,

NestedCarousel.tsx

import React, { useState, useEffect, useCallback } from 'react';
import useEmblaCarousel from 'embla-carousel-react';
import imageUrlBuilder from '@sanity/image-url';
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
import clsx from 'clsx';
import { SanityImageAssetDocument } from '@sanity/client';
import { EmblaCarouselType, EmblaEventType } from 'embla-carousel';

const VariedTypeCarousel = ({ s, parallaxValues, index }: any) => {
  switch (s._type) {
    case 'image':
      return (
        <div className="embla__slide__nested" key={index}>
          <div
            className="embla__slide__inner__nested"
            style={{ transform: `translateY(${parallaxValues[index]}%)` }}
          >
            <img
              className="embla__slide__img__nested"
              src={urlFor(s.asset._ref).height(480).url()}
              alt="A cool cat."
            />
          </div>
        </div>
      );
    case 'video':
      return (
        <div className="embla__slide__nested">
          <div className="embla__slide__inner__nested">
            <div
              className="embla__slide__img__nested"
              style={{ transform: `translateY(${parallaxValues[index]}%)` }}
            >
              <video
                //@ts-ignore
                autoPlay="autoplay"
                muted
                playsInline
                loop
                className="video"
              >
                <source src={`${s.id}`} type="video/mp4" />
              </video>
            </div>
          </div>
        </div>
      );
    default:
      return null;
  }
};

const NestedCarousel = ({ slides }: any) => {
  const [viewportRef, embla] = useEmblaCarousel(
    {
      axis: 'y',
      skipSnaps: false,
      loop: false,
      dragFree: false,
    },
    [WheelGesturesPlugin({ forceWheelAxis: 'y' })]
  );

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

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

  const PARALLAX_FACTOR = 1;

  const [parallaxValues, setParallaxValues] = useState([]);
  // console.log('parallaxValues', parallaxValues);

  const scrollTo = useCallback(
    (index: number) => {
      embla && embla.scrollTo(index);
    },
    [embla]
  );

  const onScroll = useCallback(
    (eventName?: EmblaEventType) => {
      if (!embla) return;

      const engine = embla.internalEngine();
      const scrollProgress = embla.scrollProgress();
      const length = embla.slideNodes().length;
      const isScrollEvent = eventName === 'scroll';
      const slidesInView = embla.slidesInView();

      const { limit, target, location, offsetLocation, translate, scrollBody } =
        engine;
      let edge: number | null = null;

      if (location.get() > limit.max) {
        scrollTo(0);
      }
      if (location.get() < limit.min) {
        scrollTo(embla.scrollSnapList().length - 1);
      }
      const styles = embla.scrollSnapList().map((scrollSnap, index) => {
        const slidesInSnap = engine.slideRegistry[index];
        if (isScrollEvent && !slidesInView.includes(index)) return 0;
        let diffToTarget = scrollSnap - scrollProgress;
        console.log('diffToTarget', diffToTarget);

        if (engine.options.loop) {
          engine.slideLooper.loopPoints.forEach((loopItem) => {
            const target = loopItem.target();
            if (index === loopItem.index && target !== 0) {
              const sign = Math.sign(target);
              if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress);
              if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress);
            }
          });
        }
        // return diffToTarget * (-1 / PARALLAX_FACTOR) * 100;
        return diffToTarget * (PARALLAX_FACTOR * length) * -100;
      });
      //@ts-ignore
      setParallaxValues(styles);
    },
    [embla, setParallaxValues]
  );

  useEffect(() => {
    if (!embla) return;
    onSelect();
    onScroll();
    embla.on('select', onSelect);
    embla.on('scroll', onScroll);
    embla.on('resize', onScroll);
  }, [embla, onSelect, onScroll]);

  return (
    <div className="embla__slide">
      <div className="embla__nested">
        <div className="embla__viewport" ref={viewportRef}>
          <div className="embla__container__nested">
            {slides.map((s: any, index: number) => {
              return (
                <VariedTypeCarousel
                  s={s}
                  index={index}
                  parallaxValues={parallaxValues}
                />
              );
            })}
          </div>
        </div>
      </div>
      <div className="embla__dots">
        {parallaxValues.map((_, index) => {
          return (
            <DotButton
              key={index}
              selected={index === selectedIndex}
              onClick={() => scrollTo(index)}
            />
          );
        })}
      </div>
    </div>
  );
};

export const DotButton = ({ selected, onClick }: any) => {
  return (
    <button
      className={clsx('embla__dot', { 'is-selected': selected })}
      type="button"
      onClick={onClick}
    />
  );
};

export default NestedCarousel;

export const projectId = 'bkokj2ln';
export const dataset = 'production';
export const apiVersion = '2024-4-1';

const builder = imageUrlBuilder({ projectId, dataset });

export function urlFor(source: SanityImageAssetDocument) {
  return builder.image(source);
}

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @xnslx,

• I believe this is a duplicate of: [Help]: Parent and Child Carousels - unable to scroll only child #801 (comment).

[xnslx]

Hey @davidjerleke Thank you so much for the quick reply! The answer seems to be very possible to solve my issue! Thank you!

[xnslx]

Hello @davidjerleke I took a close look at that question, and played around with this codesandbox, I notice that you slightly change loop:false, then when you swipe to another slide, the current/previous slide will shift/move. Is it an expected behavior? Or any solution to fix it? Thank you so much for such a wonderful carousel!

[sarussss]

Hi @xnslx
Codesandbox you shared cannot be viewed because it has exceeded the free limit.

[davidjerleke]

@xnslx or the CodeSandbox might be private. If that’s the case you should make it public.

[xnslx]

Hey @davidjerleke @sarussss I just notice that it is private. It should be ok now. codesandbox If it is still not working, I am gonna convert it to Stackblitz. Thank you so much for the patience and help!

[xnslx]

I deploy my project to Vercel. Interesting that if you use laptop to see, the jitter is very obvious while on the phone, it is not that much. 🤔 Here is the link

[davidjerleke]

@xnslx I'm not authorized to see the link in your previous comment.