Auto Height in React

[Tambouil]

hello,

Can anyone help me to get auto height in my carrousel with next JS please ?
I can't figure out why it doesn't work

here is my code :

import React, { useState, useEffect, useCallback, useRef } from "react";
import { PrevButton, NextButton } from "./CarouselButtons";
import useEmblaCarousel from "embla-carousel-react";
import Autoplay from "embla-carousel-autoplay";
import AutoHeight from "embla-carousel-auto-height";

const CarouselDetails = ({
  options = { loop: true, destroyHeight: "auto" },
}) => {
  const autoplay = useRef(
    Autoplay(
      { delay: 5000, stopOnInteraction: false },
      (emblaRoot) => emblaRoot.parentElement
    )
  );
  const autoheight = useRef(AutoHeight((emblaRoot) => emblaRoot.parentElement));

  const [emblaRef, emblaApi] = useEmblaCarousel(
    options,
    [autoplay.current],
    [autoheight.current]
  );
  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
  const [nextBtnEnabled, setNextBtnEnabled] = useState(false);

  const scrollNext = useCallback(() => {
    if (!emblaApi) return;
    emblaApi.scrollNext();
    autoplay.current.reset();
  }, [emblaApi]);

  const scrollPrev = useCallback(() => {
    if (!emblaApi) return;
    emblaApi.scrollPrev();
    autoplay.current.reset();
  }, [emblaApi]);

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

  useEffect(() => {
    if (!emblaApi) return;
    onSelect();
    emblaApi.on("select", onSelect);
  }, [emblaApi, onSelect]);

[davidjerleke]

Hi @Tambouil,

Thanks for your question. It seems like you've misunderstood the documentation. Here's what the documentation say:

• The Embla Carousel constructor accepts an optional plugin array as the thrid argument, which enables you to extend your carousels with additional features.

Here are some problems I found with your setup:

• You're adding each plugin in a separate array. All plugins should be in the same array.
• You're not referring to the autoheight.current when passing the AutoHeight plugin to Embla.
• The default options for the AutoHeight plugin is auto so no need to pass any options to it.

Try this:

import React, { useState, useEffect, useCallback, useRef } from "react";
import { PrevButton, NextButton } from "./CarouselButtons";
import useEmblaCarousel from "embla-carousel-react";
import Autoplay from "embla-carousel-autoplay";
import AutoHeight from "embla-carousel-auto-height";

const CarouselDetails = ({
  carouselOptions = { loop: true },
}) => {
  const autoheight = useRef(AutoHeight());
  const autoplay = useRef(
    Autoplay(
      { delay: 5000, stopOnInteraction: false },
      (emblaRoot) => emblaRoot.parentElement
    )
  );
  
  const [emblaRef, emblaApi] = useEmblaCarousel(
    carouselOptions,
    [autoheight.current, autoplay.current],
  );

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

  const scrollNext = useCallback(() => {
    if (!emblaApi) return;
    emblaApi.scrollNext();
    autoplay.current.reset();
  }, [emblaApi]);

  const scrollPrev = useCallback(() => {
    if (!emblaApi) return;
    emblaApi.scrollPrev();
    autoplay.current.reset();
  }, [emblaApi]);

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

  useEffect(() => {
    if (!emblaApi) return;
    onSelect();
    emblaApi.on("select", onSelect);
  }, [emblaApi, onSelect]);

Now this might work, but you haven't provided a CodeSandbox with your full setup. So there might be other problems with your JS or CSS setup that I can't help you with.

Kindly,
David

[davidjerleke]

@Tambouil if that's the case, you can solve this in two ways:

1. If you know the image heights in advance (if you get them from your CMS or similar), you can set individual heights on your slides in your JSX like so style={{ height: image.height }}.
2. Don't set any slide heights in your CSS, and add onLoad listeners to your images instead. When all your images have loaded, run embla.reInit() so embla picks up the heights of your images.

[Tambouil]

Images are loaded from a headless cms so I think the second solution might be the best.

I don't know how I can write that but I will try. Thank you very much.

Best Regards

[davidjerleke]

@Tambouil many CMS:s will provide useful image information like dimensions in order for devs to create placeholders for their images. Devs want to do that in order to prevent pages from jumping when images load. I think this is more of a convention than exception these days. I hope that this is the case for the CMS you are using.

Cheers

[Tambouil]

Yes contentful provide image dimensions. I can try that.

by the way, my codesandbox is updated and show exactly my problem : https://codesandbox.io/s/vigilant-dream-hyzjoy

[davidjerleke]

Set the slide heights in your JSX that Contentful gives you and it will work. This is just a rough example of what should be your goal:

{images.map((image, index) => 
  <div className="embla__slide" key={index}}>
    <img
      className="embla__slide__img"
      src={image.url}
      style={{ height: image.height }}
      alt={image.alt}
    />
  </div>
)}

Your CodeSandbox still have problems because you haven't implemented any of my suggestions here.

[Tambouil]

thanks a ton david