Make nestable slider centered (if the number of slides is less then "items to show")

[Blackeye]

Hello,

Is it possible to center a slider with less slides then defined in “items to show”?

I’ve got a dynamic slider populated by the loop showing the sibling pages in the menu tree. Items to show are set to 5, but there are sections with less then 5 subpages and they look a bit weird as there are emty slots for non existent items.

Here is the illustration of the problem:

In the forst row, there are only two items, in the second row, there is fully stacked slider. I’d like to have the first wow centered.

It’s probably possible only by using JS, there might be a pre-build function for this, is it?

Thanks
Petr

[KOBE42]

This is an easy fix, you just need to center the entire block/div in which the slider is inside of. Then even if the slider spans the entire width of the page (like your second row here), it should still look like the same as it does now. But if there’s less than 5 slider items it should center it.

So wrap your slider in a block and on that block use, under ‘Align cross axis’ > select ‘center’ (see below)

The above settings are placed on the div that wraps the entire slider. If you dont have one, you need to create one.

Hope that helps

[Blackeye]

Hi @KOBE42, thanks for the advice, but I’m afraid that the slider doesn’t work this way.

The slider has several additional nested divs inside and the slider width itself is set to 100%. So wrapping the slider wouldn’t make any difference. Even aligning the slider itself doesn’t make any difference.

And if I would center the “splide__list”, which is the direct parent of all the slides, I would break the slider’s functionality, because all the scrolling relies on the fixed posssition of this element.

[KOBE42]

Hey, @Blackeye

I see… I know that making adjustments to sliders using CSS can cause all sorts of weird behaviour.

In this case then perhaps you could use a bit of custom JS.

Traverse through the DOM nodes and count how many children there are. If > then 5 then apply the CSS to center it?

Some thing like this:

const sliderWrap = document.getElementById("slide-wrapper");

let slideNum = sliderWrap.children.length;

if (slideNum < 5) {
  sliderWrap.style.justifyItems = ‘center’;
}

Apologies, I’m replying on my phone so this code could be a bit rough.

[Blackeye]

Hi @KOBE42,

Well my point was, that first I wanted to ask, wheather the Bricks slider (aka SplideJS ) doesn’t have this feature prebuilt. Only if not, I would start with tweaking it.

Thanks for your help anyway.

[KOBE42]

Hope you can find a solution