NO BUG: Bug in the conditional display of pagination and arrows

Browser: Chrome 115
OS: Windows

Hi @thomas,

It seems that there is a small problem in the bricks sliders…

In Elementor and other plugins like jet woobuilder that have a carousel, if the number of slides is not enough for scrolling, pagination and arrows are automatically hidden. So if the number of slides increases, they will be displayed again. This is a reasonable behavior.
But this issue does not exist in bricks sliders. For example, in the screenshot below, we can see that the slider is not scrollable. Because the number of sliders required for scrolling is small. But pagination and arrows are still displayed, while displaying them is of no use and can even mislead the user.

Hey @jolia,

thanks for your report.

However, this is not a bug as what you think is the correct behavior might not be true for everyone.

You can easily hide those controls with some custom CSS if you like:

root .splide__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

root .splide__pagination > li:only-child {
  opacity: 0;
  pointer-events: none;
}

I chose opacity: 0 over display: none to be able to animate the controls when they might be shown again on a smaller breakpoint (see Turn off swiping/arrows/pagination when not enough items · Issue #272 · Splidejs/splide · GitHub).

Best,

André

2 Likes