Property `mousewheel` not working with `ClientOnly`

[frederikheld]

Hello,

I'm using the Swiper Web Components through your nuxt-swiper plugin.

As per your docs, to get around annoying Nuxt hydration bs errors, the web componets have to be wrapped in a ClientOnly block. Unfortunately, this breaks the mousewheel option of your plugin which does not seem to have any effect if the slider is in a ClientOnly block.

However, it works if I do not wrap the swiper element in a ClientOnly block but then I will get an annyoing Nuxt hydration bs error.

I tried to inject the settings via props on the component as well as through the swiper instance in TS code. mousewheel doesn't work either way.

What am I doing wrong?

[frederikheld]

This is super weird.

I made it work without ClientOnly by manually adding all classes Nuxt was complaining about.

Now the mousewheel prop works, but only under very limited conditions:

a) I have to use the loop prop as well
b) I have to scroll to the end, until loop has triggered for the first time

Now I can suddenly scroll the slider.

Ah, and another thing: when scrolling the slider, loop will only work when scrolling backwards. If I scroll forwards, loop will not be triggered when reaching the end of the slideshow. I have to grab the slider at that point to trigger loop and then I can scroll through it until the new end, then I have to grab again. But as I said: the other way round it triggers perfectly fine.

So unless I'm doing something completely wrong, there's something messed up with the plugin.