Turn off swiping/arrows/pagination when not enough items

[micka-fdz]

Hello.

How can we turn off swiping/arrows/pagination when there are less items than perPage option?

I think we need an additional option, like watchOverflow on Swiper.

[rensite]

In your case arrows should be disabled by splide, check it.
Disabled arrows can be easily hidden using css:

<style>
  .splide__arrow {
    transition: opacity .3s ease;
  }
  .splide__arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }
</style>

The reason why not just display:none is because opacity can be animated.

[chozzz]

If you have only 2 items in a 4 items per page, the arrows are unnecessary at all. And yes, both of them will be disabled and hidden with this approach.

What if we want to use the same configuration, but keep the disabled ones for the ones that have more than 4 items in a 4 items per page?

[christian-reichart]

@rensite There is still a valid use case to be able to react when the arrows are not needed.

In my case I style the wrapper of the slider to leave enough space left and right, so the arrows can be positioned absolute and dont overlap the content.

In my opinion this could be solved if the onPaginationUpdate event would fire when there is only 1 page. Currently it doesn't. With this event I could remove the spacing of the wrapper and hide the disabled arrows.

Does anybody know if this can be achieved in any other way?

[christian-reichart]

I found a workaround which is pretty solid I think (using the React version of Splide).
Sadly the Splide object that comes with this event has an old state, otherwise you could just use splide.Components.Pagination.items.length > 0, but thankfully the html components of prev and next represent the current state, and if both are disabled, we don't need the arrows at all.

import { Splide as SplideObj } from '@splidejs/splide'

const [showArrows, setShowArrows] = useState(false)

const handleArrowsUpdated = (
  splide: SplideObj,
  prev: HTMLButtonElement,
  next: HTMLButtonElement,
  prevIdx: number,
  nextIdx: number,
) => {
  setShowArrows(!(prev.disabled && next.disabled))
}

<Splide onArrowsUpdated={handleArrowsUpdated} hasTrack={false}>
  <div className="splide__arrows" style={{ display: showArrows ? 'initial' : 'none' }} />
  <SplideTrack>
    {...}
  </SplideTrack>
</Splide>

[miklb]

In your case arrows should be disabled by splide, check it.

using 1.4 I have perPage: 4 and set breakpoints for smaller screens but when only 3 items are available on desktop I still get an arrow.

I also tried defaulting to perPage: 1 and reversing the breakpoints for larger screens with same result. I did apply the opacity:none to :disabled and that removes the left arrow sometimes.

Any suggestions welcome or if I missed something.

[miklb]

I may have been dealing with a cache or something because it seems to be resolved. Apologies for the noise.

[McGern]

From version 4.1.0, there is now an overflow watcher available for this type of thing. Details here
https://splidejs.com/guides/overflow/

Have just tried it, cut and pasted the sample code, and it worked a treat.

splide.on( 'overflow', function ( isOverflow ) {
  splide.options = {
    arrows    : isOverflow,
    pagination: isOverflow,
    drag      : isOverflow,
  };
} );