Slider: custom options result in not showing slider - how to do it right?

How To
1

Hello,
in another disscussion I got the tip from the kind user wplit to set the settings of the nestible slider to “Custom” and then enter my own code. (NO BUG: Slider(Nestable) Autoplay not working - #20 by wplit)

I tried that… Unfortunately without success. I added the following code in the “Custom” section. Unfortunately, this results in the slider not showing up in the frontend at all.

{
“type”: “loop”,
“direction”: “ltr”,
“keyboard”: “global”,
“height”: “70vh”,
“padding”: “20%”
“gap”:20,
“start”: “1”,
“perPage”: “1”,
“perMove”:1,
“speed”:400,
“autoHeight”:true,
“autoplay”:false,
“pauseOnHover”:true,
“pauseOnFocus”:false,
“interval”:3000,
“arrows”:true,
“pagination”:true
}

I probably didn’t mark up the code correctly. I tried to get an idea of how to do it correctly via Google and in the documentation of Splide (Options - Splide). But unfortunately I can’t get any further there.

Is there a how-to where the implementation of custom code for the slider is explained for dummies like me? Thanks for any help!

2

The JSON needs to be valid, currently you’re using the wrong type of quotes and are missing a comma in the padding, there may be other issues, but at first glance that’s the main issue. If you put it through a JSON validator it should show up the issues.

edit- here’s how it should be;

{
"type": "loop",
"direction": "ltr",
"keyboard": "global",
"height": "70vh",
"padding": "20%",
"gap":20,
"start": 1,
"perPage": 1,
"perMove":1,
"speed":400,
"autoHeight":true,
"autoplay":false,
"pauseOnHover":true,
"pauseOnFocus":false,
"interval":3000,
"arrows":true,
"pagination":true,
"reducedMotion": {
    "autoplay": false,
    "speed" : 400
  }
}

(notice the numbers for perPage , perMove etc need to be integers, not strings, so no quotes)

1 Like
3

hooray… This works great and now I have understood the principle. So many thanks for your effort :slight_smile:

1 Like
4

Is it possible to use event callbacks here and what is the valid json for that?
For example mounted, moved or resized output to console.log(‘’).