[Feat]: Consistent slide transitions / timing regardless of index position

[WhiskeyBest]

Which variants of Embla Carousel are relevant to this feature request?

• 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)

Feature description

First of all, Embla carousel has been working fantastic for us! Thank you.

We're currently using Embla as the foundation for our stepper / onboarding wizard. Being a stepper, the user is able to use the scrollTo method to jump to and from any step in the wizard. Additionally we also "hide" certain slides based on some admin-related settings.

One thing we've noticed is that the sliding animation between slides directly adjacent to each-other index-wise is very nice and smooth. However, if it needs to "jump" a hidden slide, or navigate to a slide a few indices away from each other, the sliding animation is quite fast and a bit jarring.

It would be really nice to have an option to force the transitions and timings between slides to remain consistent regardless of their relative positions.

Thanks again for all the amazing work on Embla!

Additional Context

Additional details here...

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 feature requests

[sarussss]

Hi @WhiskeyBest
You can use this option
Demo

Code i used in demo

.embla__slide--hide {
  display: none;
}

const OPTIONS = {
  slides: '.embla__slide:not(.embla__slide--hide)'
}

const emblaNode = document.querySelector('.embla')
const viewportNode = emblaNode.querySelector('.embla__viewport')
const emblaApi = EmblaCarousel(viewportNode, OPTIONS)

document.getElementById('demo').addEventListener('click', (event) => {
  emblaApi.slideNodes()[2].classList.add('embla__slide--hide')
  emblaApi.reInit()
  event.target.setAttribute('disabled', '')
})

[davidjerleke]

Hi @WhiskeyBest,

One thing we've noticed is that the sliding animation between slides directly adjacent to each-other index-wise is very nice and smooth. However, if it needs to "jump" a hidden slide, or navigate to a slide a few indices away from each other, the sliding animation is quite fast and a bit jarring.

Thank you for your question. How do you handle the hidden slides? You should filter out the hidden slides by providing a selector that only selects visible slides. Use the slides option to achieve this if you haven't already. Additionally, you should run emblaApi.reInit() when hidden slides change so Embla can adjust accordingly.