Dynamic loop && enabled state

[7iomka]

Hi.
We have different variations for slides per view for some breakpoints.
The main goal is:

when items.length > current slidesPerView - enable loop and show navigation
when items.length <= current slidesPerView - disable loop (because we don't need duplicated items for example if a we have for example 4 items in row but actual is only 2 items in list) and also hide navigation, in other words we don't want any interactions be possible.

Actual Behavior
When loop is enabled, navigation state is weird - if we configured 3 slidesPerView, but items.length === 2, when we navigate to next, carousel just slide to 1 position and stops. From default position navigation to prev is not possible, only if we navigate to next, then it work to 1 position left.

I have similar issue with swiper, and now I'm try to solve it by research and to find another plugin to work correctly.

I use it in react, as part of [https://mantine.dev/others/carousel/](Mantine ui library)

Thanks for any ideas how to solve my goal.

[davidjerleke]

Hi @7iomka,

Thanks for your question. Before you try this solution you need to ask the Mantine team to bump the embla-carousel-react version to the latest. Because v7.0.0 had a serious bug that was fixed in v7.0.1.

About the solution. I'm not quite sure I'm following but if I understand you correctly, you should be able to set:

const options = {
  slidesToScroll: 'auto' 
}

Read more about how slidesToScroll works here. And make sure to pass the options as demonstrated in the Mantine docs because Mantine adds a layer on top of the raw carousel API.

About the following logic:

when items.length > current slidesPerView - enable loop and show navigation
when items.length <= current slidesPerView - disable loop

You need to access the Embla instance as demonstrated in the Mantine docs to achieve this. Here's how you can toggle the carousel active:

function toggleActiveWhenScrollable() {
  const isScrollable = embla.internalEngine().slideLooper.canLoop()
  embla.reInit({ active: isScrollable })
}

embla.on('resize', toggleActiveWhenScrollable)
toggleActiveWhenScrollable()

...or with React:

const toggleActiveWhenScrollable = useCallback(() => {
  if (!embla) return
  const isScrollable = embla.internalEngine().slideLooper.canLoop()
  embla.reInit({ active: isScrollable })
}, [embla])

useEffect(() => {
  if (!embla) return
  toggleActiveWhenScrollable()
  embla.on('resize', toggleActiveWhenScrollable)
}, [embla, toggleActiveWhenScrollable])

I hope this helps you on the right track.

Best,
David