Hide arrows if items count is less than [perPage] number

[mostafa-norouzi]

Hi

Is it possible that Splide doesn't show Arrow Keys (right-left) when total number of items in the scroll bar is less than [perPage] variable?

Currently it shows disabled arrows.

[Webberjo]

You can hide them with CSS.

.splide__arrow[disabled] {
  display: none;
}

[mostafa-norouzi]

Unfortunately that's not the solution and this code affects on all instances of scrolls, even on those that have multiple pages because when you reach the end of scroll, one arrow will be hidden but we don't want to hide it!

The arrows should be hidden just if whole number of items be less than [perPage] variable and I think this should be calculated in JS not CSS.

[Webberjo]

In that case, you can update the slider's arrows option based on the slide count and perPage value.
https://splidejs.com/guides/apis/#options
https://splidejs.com/guides/apis/#length
https://splidejs.com/guides/options/#perpage

splide.options = {
  arrows: splide.length > splide.options.perPage
}

I recommend doing this in a window resize event, and also updating the drag and keyboard options as well to prevent the slider from being scrollable by those means.

https://jsfiddle.net/Webberjo/9vk2t460/4/

[mostafa-norouzi]

What I was searching for! Thank you 🌷