Not able to style container within embla__slide with flex or grid

[Patrikur]

Hey everyone,

I have been trying to understand why the containers I am styling within the embla__slide container are causing the carousel function to stop, until I found out that either using flex or grid are causing this. So, I am not able to position the elements within the container properly.
Any suggestions how to achieve this or is this an issue that needs to be fixed?

[davidjerleke]

Hi @Patrikur,

You didn't share a CodeSandbox or similar to demonstrate the problems you are facing so I have nothing to investigate. Please create a CodeSandbox with your setup if you want help.

There are tons of examples here and you also have a carousel generator. Have you seen the examples?

Best,
David

[Patrikur]

Hi @davidjerleke ,
Thanks for the quick reply. Would it be enough to post the code from the component in here? I checked the CodeSandbox examples and there it works, so I was wondering if I did something wrong in my setup.
I have seen the examples and checked the whole documentation before I posted here.

[davidjerleke]

Would it be enough to post the code from the component in here?

I can't guarantee that I can solve it from fragments of code. It's always easier and more time efficient to create your own CodeSandbox with your own setup and share the link so I can take a look.

Best,
David

[Patrikur]

Let's give it a try with the code first, since I compared it to the CodeSandbox examples and and implementing it there it works fine. I hope I am just overlooking something.

Thanks already for your help!

This is the component code:

import Link from "next/link";
import Image from "next/image";
import React, { useCallback, useState } from "react";
import useEmblaCarousel, { EmblaOptionsType } from "embla-carousel-react";
import { CaretLeft, CaretRight } from "@phosphor-icons/react";

interface FrontMenuSliderProps {
  data: any;
  media: any;
  options?: EmblaOptionsType;
}

export default function FrontMenuSlider({ data, media, options }: FrontMenuSliderProps) {
  // handling slider options
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true,
    dragFree: true,
    ...options,
  });

  // handling slider navigation

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev();
  }, [emblaApi]);
  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext();
  }, [emblaApi]);

  return (
    <div className="embla">
      <div className="embla__viewport" ref={emblaRef}>
        <div className="embla__container">
          {data.acf.menu_item.map((item: any, index: number) => {
            const icon = media.filter((media: any) => media.id === item.icon);

            return (
              <div key={index} className="embla__slide">
                <Link href={item.item_link}>
                  <Image
                    alt="menu icons"
                    src={icon[0].source_url}
                    width={icon[0].media_details.width}
                    height={icon[0].media_details.height}
                  ></Image>
                </Link>
                <span>{item.item_name}</span>
              </div>
            );
          })}
        </div>
        {/* <button className="embla__prev" onClick={scrollPrev}>
          <CaretLeft size={30} />
        </button>
        <button className="embla__next" onClick={scrollNext}>
          <CaretRight size={30} />
        </button> */}
      </div>
    </div>
  );
}

And this the CSS:

.embla {
  overflow: hidden;
}

.embla__viewport {
  position: relative;
  width: 100%;
  display: flex;
  height: auto;
}

.embla__container {
  display: flex;
  gap: 20px;
  position: relative;
}

.embla__slide {
  flex: 0 0 auto;
  min-width: 0;
  height: auto;
display:flex;
}

.front-menu-mobile .embla__slide:last-child {
  margin-right: 20px;
}

.front-menu-mobile .embla__prev {
  position: absolute;
  left: 0;
  top: 40%;
  margin: auto 0;
}

.front-menu-mobile .embla__next {
  position: absolute;
  right: 0;
  top: 40%;
  margin: auto 0;
}

[davidjerleke]

@Patrikur it seems like you have overflow: hidden on the wrong element. Try removing all your CSS in the embla and embla__viewport class, and replace it with this:

.embla {
  position: relative;
}

.embla__viewport {
  overflow: hidden;
  width: 100%;
}

Additionally I would recommend you to add touch-action: pan-y; on your embla__container class.

Best,
David

[Patrikur]

Thanks a bunch, David! That was it, now the flex property works on the slide element :)