Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Jam
Unable to set the focus options for the Nestable Slider to ‘center’.
When adding ‘center’ to the Nestable Slider’s options no changes appear for the focus option in the broswer inspector.
Previous post: Nestable Slider "is-active" Class
Documentation: Options - Splide
Hi @SeanNAB,
I am not able to replicate the issue locally. Can you copy-paste your slider nestable JSON here, so I can check it.
Here is the slider where I’ve tested. As you can see, the “Slide 1” is in the center.
{"content":[{"id":"2a560f","name":"slider-nested","parent":"b85a16","children":["184404","9abf2f","dedd96"],"settings":{"pagination":true,"slideBackground":{"color":{"hex":"#62ff00","id":"abxyoz","name":"Color #15"}},"gap":"20","arrows":true,"arrowBackground":{"hex":"#ffffff"},"prevArrow":[],"nextArrow":[],"nextArrowRight":"2%","prevArrowLeft":"2%","perPage":"3","focus":"center"},"selectors":[],"themeStyles":[]},{"id":"184404","name":"block","parent":"2a560f","children":["da9d5c","be0931"],"settings":[],"label":"Slide 1"},{"id":"da9d5c","name":"heading","parent":"184404","children":[],"settings":{"text":"Slide 1"}},{"id":"be0931","name":"button","parent":"184404","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary"}},{"id":"9abf2f","name":"block","parent":"2a560f","children":["d859ad","ddac98"],"settings":[],"label":"Slide 2"},{"id":"d859ad","name":"heading","parent":"9abf2f","children":[],"settings":{"text":"Slide 2"}},{"id":"ddac98","name":"button","parent":"9abf2f","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary"}},{"id":"dedd96","name":"block","parent":"2a560f","children":["040d45","911349"],"settings":[],"label":"Slide 3"},{"id":"040d45","name":"heading","parent":"dedd96","children":[],"settings":{"text":"Slide 3"}},{"id":"911349","name":"button","parent":"dedd96","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary"}}],"source":"bricksCopiedElements","sourceUrl":"https://1bricks.local","version":"2.0.2"}
Feel free to test with my slider as well, if it’s any difference.
Thank you,
Matej
Here is the JSON for the slider.
I see in the JSON that the is set to center, but it doesn’t reflect on the slider itself. I have custom css to add a border with a specific color to the slides that have the “is-active” and “is-next” classes.
{
"id": 3343,
"name": "slider",
"title": "slider",
"date": "2025-09-19 07:42:58",
"date_formatted": "September 19, 2025",
"permalink": "https://www.staging.nibbleabit.com/template/slider/",
"thumbnail": null,
"bundles": [],
"tags": [],
"type": "",
"content": [
{
"id": "dc3a88",
"name": "slider-nested",
"parent": 0,
"children": ["69c429", "8f784f", "56a421", "11590e", "f8a555"],
"settings": {
"pagination": true,
"height:mobile_portrait": "auto",
"gap:mobile_portrait": "0.5rem",
"_cssCustom:mobile_portrait": "#brxe-dc3a88 .is-active div{\n border: solid 5px #9342f5;\n}\n\n#brxe-dc3a88 .is-next div{\n border: solid 5px blue;\n}",
"type": "loop",
"perPage:mobile_portrait": "3",
"focus:mobile_portrait": "center"
}
},
{
"id": "69c429",
"name": "block",
"parent": "dc3a88",
"children": ["473b70"],
"settings": [],
"label": "Slide 1"
},
{
"id": "473b70",
"name": "div",
"parent": "69c429",
"children": [],
"settings": {
"_background:mobile_portrait": {
"color": { "hex": "#ee3825", "id": "gkazxp", "name": "Secondary" }
},
"_display:mobile_portrait": "flex",
"_width:mobile_portrait": "3rem",
"_height:mobile_portrait": "3rem"
}
},
{
"id": "8f784f",
"name": "block",
"parent": "dc3a88",
"children": ["2b9544"],
"settings": [],
"label": "Slide 1"
},
{
"id": "2b9544",
"name": "div",
"parent": "8f784f",
"children": [],
"settings": {
"_background:mobile_portrait": {
"color": { "hex": "#0d0b10", "id": "ayfpct", "name": "Background -2" }
},
"_display:mobile_portrait": "flex",
"_width:mobile_portrait": "3rem",
"_height:mobile_portrait": "3rem"
}
},
{
"id": "56a421",
"name": "block",
"parent": "dc3a88",
"children": ["22d2f9"],
"settings": [],
"label": "Slide 1"
},
{
"id": "22d2f9",
"name": "div",
"parent": "56a421",
"children": [],
"settings": {
"_background:mobile_portrait": {
"color": { "hex": "#345324", "id": "vpwfbl", "name": "Color #7" }
},
"_display:mobile_portrait": "flex",
"_width:mobile_portrait": "3rem",
"_height:mobile_portrait": "3rem"
}
},
{
"id": "11590e",
"name": "block",
"parent": "dc3a88",
"children": ["74e5fd"],
"settings": [],
"label": "Slide 1"
},
{
"id": "74e5fd",
"name": "div",
"parent": "11590e",
"children": [],
"settings": {
"_background:mobile_portrait": {
"color": { "hex": "#345324", "id": "vpwfbl", "name": "Color #7" }
},
"_display:mobile_portrait": "flex",
"_width:mobile_portrait": "3rem",
"_height:mobile_portrait": "3rem"
}
},
{
"id": "f8a555",
"name": "block",
"parent": "dc3a88",
"children": ["8fde84"],
"settings": [],
"label": "Slide 1"
},
{
"id": "8fde84",
"name": "div",
"parent": "f8a555",
"children": [],
"settings": {
"_background:mobile_portrait": {
"color": { "hex": "#345324", "id": "vpwfbl", "name": "Color #7" }
},
"_display:mobile_portrait": "flex",
"_width:mobile_portrait": "3rem",
"_height:mobile_portrait": "3rem"
}
}
]
}
Hi,
have you tried with my JSON? Just copy-past it in to the builder and see if it works.
However, when I import your template, I don’t see any custom settings. Can you try to copy-paste the elemetn itself instead?
Matej
This is the element code.
< div
id=“brxe-aicgcq”
data-script-id=“aicgcq”
class=“brxe-slider-nested splide is-overflow is-initialized splide–loop splide–ltr splide–draggable is-active”
data-splide=‘{“type”:“loop”,“direction”:“ltr”,“keyboard”:“global”,“height”:“50vh”,“gap”:“0px”,“start”:0,“perPage”:3,“perMove”:1,“speed”:400,“interval”:3000,“autoHeight”:false,“autoplay”:false,“pauseOnHover”:false,“pauseOnFocus”:false,“arrows”:false,“pagination”:true,“mediaQuery”:“min”,“breakpoints”:{“320”:{“height”:“auto”,“gap”:“0.5rem”,“perPage”:“3”},“1920”:{“type”:“loop”,“pagination”:true}}}’
role=“region”
aria-roledescription=“carousel”
>
Hi,
no, this is not what I would like to see 
If you can right click on the element → press “copy”, and paste it here.
It should be in the JSON format.
However, before you do this, please check the following and let me know:
Best regards,
Matej
Hey Matej,
On the builder I am using breakpoints that start from mobile to desktop(By default it is desktop to mobile).
I’m not sure if this is a bug or just how bricks does things but when I set the “focus” option to center on the desktop breakpoint even though the base breakpoint is set to be mobile.
So far I have what I was looking for now should I make another bug report separately for this?
If you’ve enabled Mobile First in the Builder,use Slider custom options. By default, Splide works in a Desktop First approach.
If your page has multiple slides (for example, 3 slides) and you want the second slide to be centered and active, set Start index to 1, Items to show to 3, and Focus to 'center'
Hi @SeanNAB
I see the issue now. Thanks for this. No need to open new bug report, as I will just include this one in the task that I’ve just made. Something seems to be off, but I’m not sure if this is from Splide.js or Bricks.
We will investigate and will update this topic once we know more.
Thank you,
Matej
