6.3.0 Beta feature request - auto hide slider navigation arrows

What is the best way to automatically hide the Slider Navigation part of the Slider element when there are not enough slides to warrant multiple pages?

I know it is possible to hid the entire element output through conditions, and checking if the Looper Total Item Count is greater than a certain number, but at smaller screen sizes, the number of items per page is smaller, so then, in the example below, where 4 items doesn’t need navigation at the largest screen size, at smaller screen sizes I would like to make it show 2 to a page, and therefore need two pages in the slider.

Would there be a way to do this within the slider control? I realise the navigation is just a Div with elements within it, so this may not be so possible.

Is there a workaround that is already known, perhaps making use of CSS classes or clever custom CSS on the elements that will update based on the number of items in the looper?

1 Like

I don’t think there’s something easy for that. I’d use the following CSS variables. I’ll add a request to add a new custom attribute that will hide if there is not enough to actually navigate. Thanks!

image

3 Likes

Thanks for the pointers. The tricky thing I see here though is that the Navigation part of the slider is on the same Div level as the Slide Container, so those variables are not visible to the CSS styling of the Navigation.

It gave me a bit of an idea for a solution, but it’s only partial.

By pulling the slides-per-page setting into a Parameter on the outer Slider (Inline) container div, I then had access to both slides-per-page and {{dc:looper:count}} in CSS and use the following to set the opacity:

$el {
  opacity: calc(var(--total-item-count) - var(--slides-per-page));
}

Which hides the navigation if the total item count is less than the per page number, but it’s still there and still interactive.

A custom attribute would be good to have here

1 Like