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

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

[davemullenjnr]

Hey @davidcetinkaya,

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

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