Navigation arrows behavior

[ejdzipi]

When I use right navigation arrow, at some point, I get to the end of the slider and there's no more space to move further right, but arrow doesn't have disabled state. In my example, you need 3 more clicks to move 'active' item to the latest, so arrow will get disabled style, but these clicks don't do anything visually. This is confusing UX, so I would like to ask, if there is some way, how to set active item to the last item, if there is no more space to move right.

For inspiration, I found another slider library, please look at example 9. Autowidth-non-loop. That is the behavior I would expect.
http://ganlanyuan.github.io/tiny-slider/demo/

Please look at simple repro, that I have prepared:
https://codesandbox.io/s/splide-autowidth-active-tgcfw

Current behavior GIF:

Expected behavior GIF:

Thanks for help.

[NaotoshiFujita]

Splide does not support such behavior by default, but you can achieve that with events, visible and hidden.

const splide = new Splide( ... );
const { Components } = splide;

splide.on( 'visible', Slide => {
  // When the first slide gets visible in the viewport:
  if ( Slide.index === 0 ) {
    Components.Arrows.arrows.prev.disabled = true;
  }
} );

splide.on( 'hidden', Slide => {
  // When the first slide gets hidden from the viewport:
  if ( Slide.index === 0 ) {
    Components.Arrows.arrows.prev.disabled = false;
  }
} );

splide.mount();

You can check the last slide by splide.length - 1 in the same way.

[ejdzipi]

Perfect, appreciate your help 👏