[Bug]: Selected slide gets reset on window resize if using breakpoints
Author: twillhornCreated Sep 11, 2025Updated Sep 13, 2025
Labelsbugcore
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
I had options like this:
const [emblaRef, emblaApi] = useEmblaCarousel(
{
breakpoints: {
'(min-width: 0px)': {
align: 'center',
startIndex: selectedSlideIndex,
},
'(min-width: 1024px)': {
align: 'start',
startIndex: selectedSlideIndex,
},
},
}
)If I scroll away from the starting slide, then resize the window, reInit is triggered and it reverts the carousel to the startIndex. Looking at the code I realized that by using breakpoints I was bypassing the logic to preserve the selected slide on reActivate: https://github.com/davidjerleke/embla-carousel/blob/e3dbdb33f7b1da756ba2af561c4247c33f816d1a/packages/embla-carousel/src/components/EmblaCarousel.ts#L130
I was able to fix the issue by pulling up the startIndex
const [emblaRef, emblaApi] = useEmblaCarousel(
{
startIndex: selectedSlideIndex,
breakpoints: {
'(min-width: 0px)': {
align: 'center',
},
'(min-width: 1024px)': {
align: 'start',
},
},
}
)But if someone needs to have separate startIndex in their breakpoints they won't be able to do this,.
Expected Behavior
startIndex should be preserved, even in breakpoints, in the reActivate case
Additional Context
I have also tried...
What browsers are you seeing the problem on?
Chrome
Version
v8.3.1
CodeSandbox
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
Source: davidjerleke/embla-carousel