Horizontal mousewheel scroll on Slider

Ask us anything
1

I’ve used the content slider provided with WeWeb. It works fine but I want to be able to add horizontal mousewheel capabilities.
I’ve added the param to the Swiper instance this way:

const swiper = wwLib.getFrontDocument().querySelector(".swiper").swiper;
swiper.params.mousewheel = {
  forceToAxis: true
};

But unfortunately, not effect.

I’ve also tried updating the instance, no luck either.

// swiper.mousewheel.enable();
swiper.update();

When console.logging the instance, the param is there.

Any idea? Thanks :slight_smile:

2

Might be because it’s within an iframe. Have you tried publishing?

3

Yes, same behavior in Editor and Published.

4

try swiper.mousewheel.enable() and make sure that if you have more than one slider in the page you change your selector to something more specific.

5

Tried it but I run into an error.
The parameter does appear in swiper.params.mousewheel but swiper.mousewheel does not.

TypeError: Cannot read properties of undefined (reading 'enable')

CleanShot 2024-01-26 at 10.30.18
CleanShot 2024-01-26 at 10.30.181548×1298 424 KB

6

right. It looks like the component does not load the mouseWheel module, that’s why it’s undefined. Unless that module is loaded there is nothing you can do to activate the mouseWheel behaviour.
Your options are:

  • ask weweb to add support for this
  • fork the component and add the support for this
  • load it from a cdn and add it to the current instance. This will probably load again some shared code so it isn’t particularly efficient and may have other unexpected conflicts.
2 Likes
7

That’s what I thought… thanks for the help @dorilama !
Will issue a ticket

2 Likes