[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!

[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.

[xnslx]

Hello @davidjerleke , i was busy with some work and finally got some time and returned with this small project. Yeah, here is the codesandbox, when you swipe the carousel, you can see the slide is jittering. Thank you for your time! Have a wonderful day!

Xian