Breakpoints Config Not Updating Slider Axis Correctly

[xzhouhse]

First, I wanna thank you for creating and maintaining this wonderful project. And we have replaced all slider components in our website to your component because it is really powerful, stable and easy to use.

Bug is related to

embla-carousel-react

Embla Carousel version

v7.0.9

Describe the bug

This bug involves updating the option axis using breakpoints. We have a component that needs to be displayed as a horizontal slider on mobile devices and a vertical slider on desktops. Previously, we relied on a pseudo-element before to achieve this, and it worked well. However, after updating our embla library to the latest stable version, the Pseudo options were removed, and the pseudo-element approach no longer works.

We attempted to use the recommended method of updating the options with breakpoints, but unfortunately, it did not work in our codebase. To troubleshoot, we checked one of your example code sandboxes and discovered that even when we replaced the static axis value with a breakpoints config, the axis was not updated to y when the screen size was bigger than the breakpoint value.

CodeSandbox

https://codesandbox.io/s/embla-carousel-y-axis-react-forked-lfv5wq?resolutionWidth=1400&resolutionHeight=800&file=/src/js/index.tsx

Steps to reproduce

1. Try to scroll vertically
2. It will not work

Expected behavior

• A clear and concise description of what you expected to happen. With my current screen resolution width, the axis should be set to y and the slider should be able to scroll vertically

Additional context

None

Thx again for your help and attention.

[davidjerleke]

Hi @xzhouhse,

Have you tried wrapping your media query string in parentheses? As demonstrated in the docs:

// ✅ Correct
const options = {
  active: true,
  breakpoints: {
    '(min-width: 768px)': { active: false },
  },
}

// ❌ Wrong
const options = {
  active: true,
  breakpoints: {
    'min-width: 768px': { active: false },
  },
}

Best, David

[xzhouhse]

Hi @davidjerleke Thx for you quick response and help. You are right, I made an easy mistake in the syntax in the code sandbox. And in my codebase, I just did some clean up and reinstall the dependency again, now it works like a charm. This issue can be closed now.

Best Regards, Zhou

[davidjerleke]

Hi @xzhouhse,

I'm glad it worked 🎉! Closing the issue.

Cheers, David