[Feature request] Add 'scrolling/moving' event to indicate slide is being dragged by cursor and then being in inertial movement

[ItsRyanWu]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

4.0.7

Description

Currently the splide has 'dragging' event but still lacks a 'scrolling/moving' event to indicate that it's in motion caused by either dragging or self inertial movement or keyboard controls

Reproduction Link

No response

Steps to Reproduce

Sorry there isn't a 'feature request' type in issue template

Expected Behaviour

Add 'scrolling/moving' event

[NaotoshiFujita]

Since the transition is made by CSS. There is no event triggered while transitioning.

[ItsRyanWu]

So does that mean I couldn't make a custom progress bar that can reflect the 'scroll left' of the carousel in real time as I drag?
Here is an example from other libraries for your reference, is it possible to implement the same effect as the black progress bar?

[NaotoshiFujita]

It's possible. For example, add an extra logic to Carsouel Progress.
All you have to do is calculate the current progress rate while dragging and apply it to the bar width:

splide.on( 'dragging', () => {
  const { Layout, Move, Direction } = splide.Components;
  const position = Direction.orient( Move.getPosition() );
  const base     = Layout.sliderSize() - Layout.listSize();
  const rate     = position / base;
  console.log( Math.min( Math.max( rate, 0 ), 1 ) );
} );

I did not test the code. Please refer to API documents for more details.
https://splidejs.com/components/move/
https://splidejs.com/components/layout/

[ItsRyanWu]

Thanks, the method can indeed update the bar width in real time as I drag, however when I release my mouse key the carousel will still be in a small period of inertial movement and for this phase I didn't find any corresponding event that helps to update the bar width, did I miss something?

[offbeat-dev]

Hi,

In case someone needs something similar in the future, I implemented a small workaround using listeners for transition events. Hope it helps 🤞

you can find a demo here : https://stackblitz.com/edit/vitejs-vite-4x2tzw?file=main.js

[SturdyPose]

@offbeat-dev Love your solution. Just changed this:

const getRate = () => {
  const { Layout, Move, Direction } = splide.Components;
  const position = Direction.orient(Move.getPosition());
  const base = Layout.sliderSize() / splide.length;
  const rate = position / base ; // Here base + 1 depends if you want additional offset
  console.log(position, Layout.slideSize(), Layout.sliderSize());

  return rate;
};

[ItsRyanWu]

That's an awesome solution!

[antiantivirus]

How would you make this work with an infinite/looping carousel? Im guessing the code above breaks for that because of the duplication of slides?

[offbeat-dev]

hi @antiantivirus

This should help: https://stackblitz.com/edit/vitejs-vite-4x2tzw

Once I have more time I'll try to improve the transition between the first and last slides

I hope it helps

[Janssenhidal]

Is there a way to make the progress bar move horizontally rather than grow using drag-free, no-snap carousel?

Here's the current behavior I have implemented:

The carousel contains 5 slides.
To determine the width of the progress bar, I divide the total progress bar width by the number of slides: 100% / 5 = 20%.
The progress bar initially starts at 0% and moves to 20% when the carousel transitions from Slide 1 to Slide 2. This pattern continues until it reaches 80% when transitioning from the second-to-last slide to the last slide, which represents 100% completion.

I have successfully achieved this behavior in a standard carousel setup. However, after modifying the carousel to be drag-free and with no snap behavior, the progress bar is no longer functioning correctly.

Can you provide guidance on how to modify the carousel implementation to ensure that the progress bar moves horizontally in a drag-free, no-snap carousel?

I have also attached a GIF demonstrating the explained behaviour.