Embla-carousel: Help with the carousel's initial load using useEffect()

[davemullenjnr]

Hi @davidcetinkaya,

Thanks so much for offering to help with this part, I know it's kinda outside of the scope of Embla specifically so you really don't have to hold my hand like this but it'd be much appreciated to learn how to configure this useEffect function.

Here's the Carousel.js component

import React, { useEffect } from 'react';
import { useEmblaCarousel } from 'embla-carousel/react';
import styled from 'styled-components';

const Wrapper = styled.section`
  height: auto;
  overflow: hidden;

  .is-draggable {
    cursor: move;
    cursor: grab;
  }

  .is-dragging {
    cursor: grabbing;
  }
`;

const Container = styled.div`
  display: flex;
  width: 100vw;
  justify-content: stretch;
`;

const CarouselWrapper = ({ children }) => {
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true,
  });

  useEffect(() => {
    if (emblaApi) {
      // Embla API is ready
    }
  }, [emblaApi]);

  return (
    <Wrapper>
      <div className="embla" ref={emblaRef}>
        <Container className="embla__container">
          {children}
        </Container>
      </div>
    </Wrapper>
  );
};

export default CarouselWrapper;

Then each slide is just a gatsby-image wrapped in a div from this CarouselSlide.js component.

export const CarouselSlide = ({ image, alt }) => {
  return (
    <div className="embla__slide">
      <Img fluid={image} alt={alt} />
    </div>
  );
};

I hope that makes sense, let me know if I need to include anything else. I think I just need an example of what to put in the useEffect bit.

Thanks in advance
Dave

[davidcetinkaya]

Hi Dave (@davemullenjnr),

If I understand what you want to achieve correctly, the idea here is to hide the carousel content until Embla Carousel has placed the slides in loop positions. This will hide the initial content jumping. Try something along these lines:

import React, { useEffect, useState } from 'react';
import { useEmblaCarousel } from 'embla-carousel/react';
import styled from 'styled-components';

const Wrapper = styled.section`
  height: auto;
  overflow: hidden;

  .is-draggable {
    cursor: move;
    cursor: grab;
  }

  .is-dragging {
    cursor: grabbing;
  }
`;

const Container = styled.div`
  opacity: ${({ $emblaHasMounted }) => $emblaHasMounted ? 1 : 0};
  transition: opacity 0.2s;
  display: flex;
  width: 100vw;
  justify-content: stretch;
`;

const CarouselWrapper = ({ children }) => {
  const [emblaHasMounted, setEmblaHasMounted] = useState(false);
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true,
  });

  useEffect(() => {
    if (emblaApi && !emblaHasMounted) {
      // Embla API is ready
      setEmblaHasMounted(true);
    }
  }, [emblaApi, emblaHasMounted, setEmblaHasMounted]);

  return (
    <Wrapper>
      <div className="embla" ref={emblaRef}>
        <Container className="embla__container" $emblaHasMounted={emblaHasMounted}>
          {children}
        </Container>
      </div>
    </Wrapper>
  );
};

export default CarouselWrapper;

Let me know if it helps.

Best,
David

[davemullenjnr]

Amazing! That's worked perfectly, thank you so much. It's now in production: hoodiehut.co.uk

That's great to see how it works, too. Really appreciate the help with this. 🙏

[davidcetinkaya]

I'm glad it helped. The website looks awesome Dave (@davemullenjnr), thanks for sharing the link 🙂. I will let you know when the new docs website is up.

Thank you for supporting this project!

Kindly,
David

[davidcetinkaya]

Hello again Dave (@davemullenjnr),

The new docs website is up. Check it out if you want.

Cheers,
David

[davemullenjnr]

Hey @davidcetinkaya,

The new site looks awesome! Really beautiful work. Huge fan of the simplicity and looks great in dark mode. 👏