SOLVED: Nestable slider - breakpoints and number of slides

Bugs
1

Bricks Version: 1.5.7
Browser: Chrome
OS: Windows

I’ve set up a breakpoint structure like this:
image

I was fighting with the nestable slider with barely any settings:

image
image424×700 24.7 KB

In the backend - it was showing fine, on the front end I only got 1 slide.

Now since the backend was 1820 wide due to the sidebars.
But the front end is on my different screen (2560)

What I found is, the nestable slider works with 3 slides FROM 1920px, not above.

Uh… should the highest custom breakpoint not take ‘above’ 1920px as well?
How do I influence wider screens then?

2

Ah…. It need to be a media query. Right I get it, but at the same time think it’s an odd one.

Ofcourse the highest breakpoint should use wider widths… leaving this here for future reference.

3

Coming back to that.

The academy states;

Blockquote The base breakpoint doesn’t have a @media query. So all styles set on the base breakpoint apply to all screen widths.

So it is a bug then?

4

Hi,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker.
There is something wrong with the items to show settings and custom breakpoints.

Best regards,
timmse

5

I ran into this issue to when I used the nestable slider and custom breakpoints, what I found is in the JSON of the options it was adding the settings in a breakpoints option, but not changing the default options any longer… my fix was to change options type from “Default” to “Custom” and applying my own JSON object:

Notice specifically I had to update the top level “height”, and then over write the “height” object again in the breakpoints array… (this was just a copy of one of my jsons) but I do have an example of getting the multiple slides to work correctly here: The Need for Change - Diabetic Foot Care - Podimetrics

Just make sure to edit your “perPage” option in the top level and then again for each breakpoint below it.

{
“type”:“loop”,
“direction”:“ltr”,
“keyboard”:“global”,
“height”:“600px”,
“gap”:“0px”,
“start”:0,
“perPage”:1,
“perMove”:1,
“speed”:600,
“interval”:8000,
“autoHeight”:false,
“autoplay”:true,
“pauseOnHover”:false,
“pauseOnFocus”:false,
“arrows”:false,
“pagination”:true,
“breakpoints”:{
“1501”:{
“height”:“600px”
},
“1024”:{
“height”:“auto”
}
}
}

3 Likes
6

Cant get it to work sadly.
Really did myself a fubar here since I’m not able to use slides.

Tried to go back to normal breakpoints but everything is styled on the higher breakpoint so going back will break litteraly everything.

Word of warning to those reading this; if you are in the beginning phase - do not set a higher breakpoint as base at this point :grimacing:

7

I am having the same issue with breakpoints. I go with mobile first and wasn’t able to setup necessary amount of slider for every breakpoint. Hopefully this will be fixed soon …

8

The JSON should be something like this:

{
  "type": "slide",
  "gap": 16,
  "breakpoints": {
    "9999": {
      "perPage": 5
    },
    "1500": {
      "perPage": 3
    },
    "1000": {
      "perPage": 2
    }
  }
}
1 Like
9

Its not valid JSON. Quotes need to be "
JSON should be something like this:

{
  "type": "slide",
  "gap": 16,
  "breakpoints": {
    "9999": {
      "perPage": 5
    },
    "1500": {
      "perPage": 3
    },
    "1000": {
      "perPage": 2
    }
  }
}
1 Like
10

Hi guys,

We’ve fixed this issue in Bricks 1.9.8 beta, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any beta release, please do not use it on a production or live website. It is only meant for testing in a local or staging environment.

1 Like
11

Ow was this fixed! Great!!
Thanks team!

12

@timmse I have just noticed another potential bug regarding the breakpoints on the nestable slider.

I have created a “Mobile First” site and found that the breakpoints set on the slider are from my smallest device and up. this means that anything that is smaller than the first break point 480px in my case does not have any values set. - (it uses the default builder values)

image
Please see the CSS attached that led me to the issue.

I was able to work around it by reducing my mobile breakpoint size to 350px