Finsweet Slider: enable trackpad swipe, drag interaction

Finsweet Components
1

Description

Hi Finsweet team,
I’m currently using your Slider in Webflow and everything is working correctly with navigation arrows. However, I’m trying to achieve a more natural interaction similar to Apple’s website (for reference: https://www.apple.com/ipad/, section “Why Apple is the best place to buy iPad”).

At the moment, the slider works only via arrows (left/right), but it does not respond to trackpad swipe or mouse drag gestures. Could you share with me if it is possible to enable a native horizontal swipe/drag interaction in parallel to arrows, with the Finsweet Slider, achieving Apple’s interactions, please?

I would really like to understand if this behavior is supported, and if so, Could you kindly support me implementing it correctly, please?

Expected Behavior

The slider should support natural interaction in parallel to left/right arrows, including:

  • Trackpad horizontal swipe

  • Mouse drag interaction

  • Mobile swipe gestures

Ideally, the experience should feel similar to native horizontal scrolling patterns seen on modern Apple-style interfaces.

Actual Behavior

Currently, the slider only responds to navigation arrows.
Swipe and drag interactions are not active.

2

Hey @sirmarcorusso!

Drag and swipe is actually a documented core feature of Finsweet Slider — so you’re in good shape here. The slider is built on Swiper.js, which natively handles mouse drag, trackpad swipe, and touch gestures all at once.

Two things worth trying:

  1. Open the Finsweet Components app in Webflow Designer, select your Slider instance, and look through the configuration settings. There may be a drag/interaction toggle that wasn’t enabled when the slider was generated. If you spot it, enable it and republish to test.

  2. If that doesn’t do it, you can enable drag programmatically through the Slider API. Add this to your page’s <head> or before </body>:

<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      sliderInstances.forEach((slider) => {
        slider.params.allowTouchMove = true;
        slider.params.grabCursor = true;
        slider.update();
      });
    },
  ]);
</script>

This enables drag across all Slider instances on the page, adds a grab cursor on hover, and covers mouse drag, trackpad swipe, and mobile touch at the same time.

One thing — the link you shared points to iPad - Apple, which is Apple’s own site, so we weren’t able to inspect your actual slider setup. Could you share your Webflow staging URL or a read-only project link? :folded_hands: That way we can look at exactly how things are configured and figure out what’s blocking the drag from activating.

3

Hi Finsweet team, thanks a lot for your previous help!

I tried enabling the drag interaction as you suggested, and it’s now working well — really appreciate the guidance on that :folded_hands:

Here’s the staging link so you can see the current behavior:
https://opusphere-ai.webflow.io/designing-space-as-art

Just to clarify my goal — I’m actually aiming for something slightly different from drag.

I’d like to achieve a more “native” horizontal scrolling experience, similar to Apple’s website, where users can scroll using the trackpad (two fingers) without needing to click and drag.

Right now, the slider still feels more like a traditional slider rather than a natural scroll.

I’m quite new to Webflow, so I’d really appreciate your advice:
Is this kind of interaction achievable using Finsweet Slider / Swiper, or would a different approach (like native horizontal scroll with scroll-snap) be more appropriate?

Many thanks again for your kind support and availability.

4

Hi again, just wanted to follow up and say thanks!

I managed to get the behavior I was looking for by enabling the mousewheel interaction — I found it while going through your demos. It’s now working really well, so thank you again for pointing me in the right direction

Also, I just want to say I really like your components — they’re super well built and very helpful.

I had one last question:

At the moment, the horizontal movement feels a bit “stepped”, as it moves card by card.
Is there a way to make the scrolling feel more free and continuous (closer to a natural trackpad scroll), instead of snapping to each card width?

If not, no worries at all — just wanted to check if there’s an easy way to achieve that.

Thanks again for all your support!