[Help]: Instantly set carousel slide index without animation

[michaelprys]

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

I’m building a gallery component in where clicking on an image opens a <dialog> containing a carousel. The problem is that when I click on an image, the carousel always opens at index 1, regardless of which image was clicked. I tried to fix this by watching for changes and using emblaMainApi.scrollTo(selectedIdx.value) to get to the carousel's position based on the clicked image index, but this causes an scrolling animation from slide 1 to the selected slide, which looks weird.

I want the selected image to appear instantly in the carousel without any scrolling animation and then be able to swipe slides from this position. Am I doing something wrong and this feature already exists? If it isn't, could it be considered for adding? Thank you.

// gallery.vue template
<template>
<div>
  <ItemModal ref="modalRef" :imgs="imgs" />
  <div v-for="(item, idx) in imgs" :key="item">
    <NuxtImg
    :src="`${item}`"
     :alt="`gallery image ${idx}`"
    @click="showImg(idx)"
    />
  </div>
</div>
</template>

// gallery.vue script
const imgs = [
  "/images/gallery/gallery-1.jpg",
  "/images/gallery/gallery-2.jpg",
  "/images/gallery/gallery-3.jpg",
];

const modalRef = ref(null);

const showImg = (index) => {
  if (modalRef.value) {
    modalRef.value.show(index);
  }
};

// modal.vue script. Here I expose the 'show' method to the 'gallery' parent component so I can use it there
defineExpose({
  show: (index: number) => {
    selectedIdx.value = index;
    isOpen.value = true;
    dialog.value?.showModal(); // showModal() is a native `dialog`'s method
  },
});

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

[davidjerleke]

Hi @michaelprys,

Have you read the docs? You can achieve what you want by setting the startIndex option or using the scrollTo method with the instant/jump parameter set to true:

emblaApi.scrollTo(index, true);

[michaelprys]

Thank you for the quick reply. I seem to have missed the 'jump' parameter in the documentation. It worked, thanks!