Finsweet Components - Slider with fractional slides per view (e.g. 1.5)

Finsweet Components
1

Description

Hey team! Using finsweet components carousel/slider:

  1. how might I add a fraction in the slides per view input?
    • Goal is to show e.g. 1.5 slides on mobile to encourage/indicate scrollability without needing buttons.
  2. how might we change the easing type (not just time) for slide transitions?

Thanks!

Site URL

Required: Not required, no error to inspect.

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

2

Hey @jonny.rich! The 1.5 slides “peek” pattern is a solid approach for communicating scrollability on mobile. Here are two ways to get it working:

Route 1 — Quick test in the app

Open your slider in the Finsweet Components app and enter 1.5 in the “Slides per view” field. It may or may not accept a decimal depending on input validation, but worth checking first. Just keep in mind this setting only shows on the published site, not in the Webflow designer.

Route 2 — Swiper.js callback (the reliable path)

Since the Finsweet Slider is built on Swiper.js, you can access the raw Swiper instance via the Component callback and set slidesPerView directly:

window.fsComponents = window.fsComponents || [];
window.fsComponents.push([
  'slider',
  (sliderInstances) => {
    sliderInstances.forEach((sliderInstance) => {
      sliderInstance.params.slidesPerView = 1.5;
      sliderInstance.update();
    });
  },
]);

If you only want this on mobile:

window.fsComponents = window.fsComponents || [];
window.fsComponents.push([
  'slider',
  (sliderInstances) => {
    const isMobile = window.matchMedia('(max-width: 767px)').matches;
    sliderInstances.forEach((sliderInstance) => {
      if (isMobile) {
        sliderInstance.params.slidesPerView = 1.5;
        sliderInstance.update();
      }
    });
  },
]);

Add this before </body> in your Webflow custom code. You’ll need to publish to staging to see it working.

A couple of things worth knowing — if you have multiple sliders on the page, the forEach above handles all of them. If you want to target just one, use sliderInstances[0]. Swiper.js also supports a native breakpoints config object if you need more granular control across viewports — just say the word and we can put together an example. :flexed_biceps: