[Help]: Limit number of scroll snaps at any screen size

[alexandra-lim]

Summary

Hi there,

I'm trying to implement a version of the carousel that only shows a max of 5 scroll snaps at any screen size to limit scroll fatigue for our use case.

I see it's technically possible with the dot navigation (though the last slide gets cut off if there's overflow) by slicing the array from api.scrollSnapList(), but is there any way to achieve this at the moment? I am looking to implement both dot and arrow navigation options.

If applicable, which variants of Embla Carousel are relevant to this question?

• 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-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

@alexandra-lim thank you for your question. I’m not 100% sure that I get the question, but have you tried using slidesToScroll option? Setting it to a number will blindly map/group slides into groups of the given number. But most devs set it to auto. With this setting, Embla will group the slides automatically based on the number of slides that fit in the viewport.

Let me know if this is what you’re looking for.

Best,
David

[alexandra-lim]

Thanks for the quick reply!

Yes, we are using the slidesToScroll auto option already.

Say we have 30 carousel items. With slidesToScroll set to auto, the number of groups increases as the width of the carousel shrinks. Is there a way to always have only 5 groups shown regardless of the number of carousel items, and disregard the remaining carousel items even if they exist?

The canScrollPrev() and canScrollNext() methods will target all the items, but would love to be able to limit that to a set number of groups (5 in this case).

[davidjerleke]

Hi @alexandra-lim,

Say we have 30 carousel items. With slidesToScroll set to auto, the number of groups increases as the width of the carousel shrinks. Is there a way to always have only 5 groups shown regardless of the number of carousel items, and disregard the remaining carousel items even if they exist?

I see. No, there's no built-in way to do this. You have to add that logic yourself. One thing that comes to mind is that you can add a class name to all "wanted" slides and then select them with the slides option:

const [emblaRef, emblaApi] = useEmblaCarousel({
  slides: '.wanted-slides-class-name-here'
})

This way, "unwanted" slides won't be included when Embla calculates stuff. I hope this helps.

Best,
David

[alexandra-lim]

Thanks for the suggestion, I'll give it a shot!

[alexandra-lim]

Hi David,

I've been able to successfully use the slides option, thanks again for the suggestion!

A follow up question to this:

If I have hidden slides and the carousel is draggable, I noticed that I can still see the hidden slide only when I drag the carousel. I'm unable to see the hidden slide with the onClick navigation (arrows and dots). You can view this behaviour in this CodeSandbox. I've added an extra slide item (placeholder dog) to your generated carousel. You'll see the dog when you drag, but not when you navigate with the arrow and dot navigation. Is there a way to prevent this?

Please let me know if you would prefer that I start a new discussion. Thanks!

[sarussss]

hi @alexandra-lim
If you want hidden placeholder dog when you drag then you need hidden it with css diplay none or position absolute
Add css code

.embla__slide:not(.show-slide) {
  display: none;
}

slides option

[davidjerleke]

Thanks @sarussss 👍!

I've been able to successfully use the slides option, thanks again for the suggestion!

A follow up question to this:

If I have hidden slides and the carousel is draggable, I noticed that I can still see the hidden slide only when I drag the carousel. I'm unable to see the hidden slide with the onClick navigation (arrows and dots). You can view this behaviour in this CodeSandbox. I've added an extra slide item (placeholder dog) to your generated carousel. You'll see the dog when you drag, but not when you navigate with the arrow and dot navigation. Is there a way to prevent this?

@alexandra-lim you have the class name .show-slide on slides that you want to show. Why not use that and hide the other slides like so:

.embla__slide:not(.show-slide) {
  opacity: 0;
  pointer-events: none;
}

Let me know if it helps.

Best,
David