Slider component: easing

Finsweet Components Slider
1

Hi, I use the FS slider component and would like to have more control over the motion of the slides. I know it is possible to change the duration of the transition, but is it also possible to change the easing? Standard is linear I guess.

2

Hey @johannes.widmer! You can use the Slider callback to modify any parameter set by the app.

As we have built the slider using Swiper, you have full access to their API using the following

<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>

Let me know if you need any help!

3

Hi @Support-Luis, thank you very much. Works perfectly!

1 Like