[Feat]: Dont cross loop when using scrollTo #1121
-
Which variants of Embla Carousel are relevant to this feature request?
Feature description#1091 is great, but it still needs the developer to calculate if the scrolling should be doen backward/forward manually. It would be great to have an option that prevents scrollTo to cross the loop. In other words: Same scroll behavior as if there would be no loop. Personally I would prefer an option over a prop. Additional ContextAdditional details here... Before submitting
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
Hi @MickL, Thank you for your feature request. I understand that having this built-in would be convenient, but I need to carefully evaluate each request to determine if it should be added, considering factors like bundle size and other implications. This is the first time this feature has been requested, so I would need more traction before considering it for inclusion in the core library. While it’s possible others have thought about it, no one has yet submitted a request. I hope that makes sense. In the meantime, you can use this snippet: function scrollToDontCrossLoop(targetIndex: number): void {
if (!emblaApi) return;
const { index } = emblaApi.internalEngine();
const direction = index.get() > targetIndex ? 1 : -1;
emblaApi.scrollTo(targetIndex, false, direction);
}I'm closing this for now and if it gets more traction in the future, I will consider adding it to the library core. Thanks for understanding! |
Beta Was this translation helpful? Give feedback.
-
@MickL well, given over 100 000 users and this is the first request about this, I beg to differ at this point. But maybe the community will prove me wrong.
I can keep it open, sure 🙂. |
Beta Was this translation helpful? Give feedback.
-
|
It only applies to users that have a clickable navigation. For example on Netflix the carousels loops, there is a navigation but the navigation is not clickable. If it would be clickable I doubt they would want the carousel to go backwards when on slide 1 and clicking slide 7 of 8 for example: 
Also IMO it also takes a lot of effort to open a feature request and opening an issue with reproduction repo. |
Beta Was this translation helpful? Give feedback.
-
@MickL, this seems to be more of your personal opinion rather than a consensus shared by the majority of users. Your opinion is valid, but it doesn’t necessarily reflect how most users feel. Additionally, Netflix isn't the ultimate standard for this kind of design—there are other valid approaches. You could also argue that the carousel shouldn’t scroll more than needed. As I mentioned before, you're the first person to request this feature. Given that we have over 100,000 users, that could be an indication of how other developers view the priority of this feature.
What do you mean by this? |
Beta Was this translation helpful? Give feedback.
-
|
I meant that the inhibition threshold and time effort is high to create an issue/feature request and therefor, just because no one requested this feature, does not necessarily indicate that there was no need. I fully understand your decision making and will be quite now, thanks for your quick responses. This works fine for me, couldnt make it work with <script setup lang="ts">
const [emblaRef, emblaApi] = emblaCarouselVue({
loop: true,
});
const activeSlide = ref(0);
function setActiveSlide() {
activeSlide.value = emblaApi.value!.selectedScrollSnap();
}
onMounted(() => {
if (emblaApi.value) {
emblaApi.value.on('init', setActiveSlide);
emblaApi.value.on('select', setActiveSlide);
}
});
</script>
<template>
<button
v-for="(image, index) in data.images"
:key="imageId"
class="size-[0.563rem] rounded-full"
:class="activeSlide === index ? 'bg-black' : 'bg-gray-300'"
@click="emblaApi.scrollTo(index, false, activeSlide > index ? 1 : -1)"
/>
</template> |
Beta Was this translation helpful? Give feedback.
-
|
@MickL this works for me: <script setup lang="ts">
const [emblaRef, emblaApi] = emblaCarouselVue({
loop: true,
});
const activeSlide = ref(0);
function setActiveSlide() {
activeSlide.value = emblaApi.value!.selectedScrollSnap();
}
function scrollTo(targetIndex: number) {
if (!emblaApi.value) return;
const { index } = emblaApi.value.internalEngine();
const direction = index.get() > targetIndex ? 1 : -1;
emblaApi.value.scrollTo(targetIndex, false, direction);
}
onMounted(() => {
if (emblaApi.value) {
emblaApi.value.on('init', setActiveSlide);
emblaApi.value.on('select', setActiveSlide);
}
});
</script>
<template>
<button
v-for="(image, index) in data.images"
:key="imageId"
class="size-[0.563rem] rounded-full"
:class="activeSlide === index ? 'bg-black' : 'bg-gray-300'"
@click="scrollTo(index)"
/>
</template> |
Beta Was this translation helpful? Give feedback.
Hi @MickL,
Thank you for your feature request.
I understand that having this built-in would be convenient, but I need to carefully evaluate each request to determine if it should be added, considering factors like bundle size and other implications. This is the first time this feature has been requested, so I would need more traction before considering it for inclusion in the core library. While it’s possible others have thought about it, no one has yet submitted a request. I hope that makes sense.
In the meantime, you can use this snippet: