[Bug]: Loop: true causes layout shift

[Verdant31]

Which variants of Embla Carousel are you using?

• 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-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Steps to reproduce

The bug occurs when I pass "loop" as true in carousel options, when loading the page for the first time the layout breaks trying to align the slides

Expected Behavior

HTML should not break when loop is true

Additional Context

I saw the documentation saying that if it doesnt have enough slides will back to loop:false but i tried with a lot slides quantities and all of than gave the layout shift.

Demonstration:

Gravando.2024-08-09.151825.mp4

Im actually using shadcn to do this but I THINK this problem is related to embla specifically (if its not the case, just close the issue)

'use client'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from '@/components/ui/carousel'

export default function MyComponent() {
  return (
    <Carousel
      opts={{
        loop: true,
      }}
      className="w-full  mx-auto"
    >
      <CarouselContent className="-ml-4">
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index} className="pl-4 basis-[260px]">
            <Card className="bg-background border-zinc-800">
              <CardHeader>
                <CardTitle className="text-md font-normal text-white">
                  Total em FIIs
                </CardTitle>
              </CardHeader>
              <CardContent className="text-white pt-2 text-lg font-semibold tracking-wide">
                <p>R$25.000,50</p>
              </CardContent>
              <CardContent className="text-white text-[12px] font-thin tracking-wide">
                <p>+6% from initial value</p>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  )
}

What browsers are you seeing the problem on?

Chrome

Version

8.1.8

CodeSandbox

No response

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for bug reports

[davidjerleke]

@Verdant31 Embla doesn’t support SSR yet but it’s on the roadmap:

• [Feat]: ⭐ Roadmap #841

See this comment for a workaround:

• [Feat]: SSR support #202 (comment)

Did you search for existing issues before creating this? If not, this is a friendly reminder that please make an effort before creating duplicate issues. Duplicate of:

• [Bug]: Slides jump on load with loop: true #600
• [Feat]: SSR support #202

[Verdant31]

That was my bad, sorry.
Thanks for you time