Can I use touch interaction on mobile?

Finsweet Components Marquee
1

Description

A client loves the marquee but wants to have the ability to scroll it on the mobile version, like it’s possible with the slider. Unfortunately, the slider does not offer continuous smooth scroll like the marquee but does offer touch interactions on mobile. Or does it?

The current link displays both a marquee and a slider.

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

  1. [First step]
  2. [Second step]
  3. [Third step]
    …

Expected Behavior

[What did you expect to happen?]

Actual Behavior

[What actually happened?]

Video/Screenshots

Required: Please provide a short screen recording showing the issue

  • Video link: [Loom/Screen recording URL]
  • Screenshots (if applicable): [Upload or link to screenshots]

Additional Context

  • Browser: [e.g., Chrome 120, Safari 17]
  • Device: [e.g., Desktop, iPhone 14]

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

2

Hey @jose1!

The Marquee and Slider components have fundamentally different behaviors that create your challenge:

Marquee

  • Creates infinite, continuous scrolling
  • Designed for automatic scrolling without user interaction
  • Doesn’t support touch/swipe interactions
  • Provides smooth scrolling in four directions

Slider

  • Built on Swiper.js with touch/swipe capabilities
  • Designed for manual interaction
  • Moves in discrete slides rather than continuous motion

You have a few options to consider:

  1. Conditional Component Approach
  • Desktop: Use Marquee for continuous scrolling
  • Mobile: Use Slider with fast autoplay to simulate continuous motion
  1. CSS Touch Control
  • Apply touch-action and overflow properties to the Marquee wrapper
  • This has limitations and won’t provide true scroll control
  1. Add Custom JS

Since the Slider is built on top of Swiper.js, you can safely add any needed code with the Components API Callback shown below:

<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      console.log('slider Successfully loaded!');

      // The callback passes a sliderInstances array with all the sliderInstance instances on the page.
      const [sliderInstance] = sliderInstances;
      console.log(sliderInstance);

      // Each sliderInstance is a Swiper object - Now you can interact with Swiper's APIs.
      // https://swiperjs.com/swiper-api#events

      sliderInstance.on('slideChange', function () {
        console.log('slide changed');
      });
    },
  ]);
</script>

The conditional approach is probably your best bet since it works with each component’s intended design rather than fighting against it. This approach maintains good performance and creates an optimized experience for each device type.

Unfortunately, there’s no perfect solution that combines both continuous scrolling and touch interaction in one component without custom code.

Would you like more specific guidance on implementing the conditional approach?
@Support-Luis or @Support-Pedro can help with any custom code solutions if needed.

3

Yes, I was trying the conditional approach, @Support-Luis what setting do you recommend for the slider (already have the marquee implemented on Desktop) to come close to a smooth scroll on the slider on mobile?