Incorrect position of the last slide for { align: 'start', loop: true }

[ludik1]

Bug is related to

• [X] embla-carousel (core package)
• [ ] embla-carousel-react
• [ ] embla-carousel-autoplay
• [ ] embla-carousel-auto-height
• [ ] embla-carousel-class-names
• [ ] embla-carousel-docs (documentation website)

Embla Carousel version

• v4.2.1

Describe the bug

For the option: emblaOptions = { align: 'start', loop: true }; If you are on the first slide, the last slide is not visible on the left side(check attached image).

CodeSandbox

https://codesandbox.io/s/embla-carousel-loop-vanilla-forked-cvdnu?file=/src/js/index.js

Steps to reproduce

After init, there is no slide on the left.

Expected behavior

The last slide will be visible on the left side for the loop option.

Additional context

Correct:

Incorrect:

[davidjerleke]

Hi @ludik1,

This is because you shouldn't change your container element position directly. If you want to move it, apply the CSS to an element that wraps it.

.embla__container {
  display: flex;
  left: 50px; /* Why this? Remove it. */
}

Additionally, please add the following CSS: margin-left: -10px on your container class like so:

.embla__container {
  display: flex;
  margin-left: -10px; /* Add this to account for slide paddings. */
}

As an alternative to adding the negative margin to the container and using slide paddings, you can add spacing between your slides as described in this guide in the docs.

Also, please update to the latest version of Embla which is 6.1.1.

Kindly, David