WIP: Nestable slider settings for custom breakpoints

Bugs
1

Browser: Firefox current
Video: https://drive.google.com/file/d/1dLt0OIdlq5TpKgCoUwzsw3ISkrHXvPSl/view?usp=sharing

Bricks version… current!

When creating a nestable slider I can’t set some custom values (gap, arrow settings…) for custom breakpoints larger than the default one.

{"content":[{"id":"jhraex","name":"slider-nested","parent":"uhvzrf","children":["yxdujl","crgguq","hiduvl"],"settings":{"_background":{},"perPage:vp_max":"4","_margin:vp_max":{"top":"300px","bottom":"300px"},"perPage":"2","gap":"2em","gap:vp_max":"6em"}},{"id":"yxdujl","name":"block","parent":"jhraex","children":["wrzanl","bhmzuo"],"settings":{"_background:vp_max":{"color":{"raw":"var(--gbe-global-color-red)","id":"tvcmju","name":"Red"}}},"label":"Slide 1"},{"id":"wrzanl","name":"heading","parent":"yxdujl","children":[],"settings":{"text":"Slide 1"}},{"id":"bhmzuo","name":"button","parent":"yxdujl","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary"}},{"id":"crgguq","name":"block","parent":"jhraex","children":["ffgfdb","zgfznr"],"settings":{"_background:vp_max":{"color":{"raw":"var(--gbe-global-color-azure)","id":"txgrqe","name":"Azure"}}},"label":"Slide 2"},{"id":"ffgfdb","name":"heading","parent":"crgguq","children":[],"settings":{"text":"Slide 2"}},{"id":"zgfznr","name":"button","parent":"crgguq","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary"}},{"id":"hiduvl","name":"block","parent":"jhraex","children":["jmgmpz","pzwejk"],"settings":{"_background:vp_max":{"color":{"raw":"var(--gbe-global-color-peach)","id":"rbrfun","name":"Peach"}}},"label":"Slide 3"},{"id":"jmgmpz","name":"heading","parent":"hiduvl","children":[],"settings":{"text":"Slide 3"}},{"id":"pzwejk","name":"button","parent":"hiduvl","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary"}}],"source":"bricksCopiedElements","sourceUrl":"","version":"2.1.1"}
2

Hi mofo,
Thanks so much for your report!

That’s a known issue, already reported by email, that is unfortunately not solved yet. We’ll update this thread once it’s fixed.

As a workaround, you can change the options type to custom and set your items to show, gaps etc. there. You can find all available options in the splide docs: Options - Splide

Example:

{
  "perPage": 3,
  "gap": 100,
  "breakpoints": {
		"1279": {
			"perPage": 2,
       "gap" : 50
		}
  }
}

Best regards,
timmse

3

@timmse oke, didn’t know of it and drove me mad for a couple hours.

Also I felt like the import of templates/elements when working with custom breakpoints is a little messed up because the default breakpoint has no “label” associated to it in the json. Adding it would mean to be able to adapt it to a different breakpoint label with just a search/replace.

Keep up the good work and thanks again.