Slider not working if set to display:none on load then display:block later

Design help Custom code
1

Hi,

I have a grid of images that expand on click using a JQuery plugin I found on codepen.

See here: http://tenfold.webflow.io/expanding-grid – click on the images in the grid to show the expanded content.

Inside each of the expanding panels I have placed a webflow slider.

The trouble is that the expanded content panels need to have display:none to hide them until a link is clicked to reveal the relevant panel. This causes the sliders to not load properly – the console gives this error: TypeError: undefined is not an object (evaluating ‘data.mask’)

I’ve found a few posts with a similar problem where the slider component needs ‘redrawing’ after being hidden.

@cyberdave – in other posts, you suggest this to redraw the slider: Webflow.require('slider').redraw(); – however I’m not sure where to add this to my project to get it working for each of the sliders – would I have to initiate the redraw individually for each slider after each click of the grid links or is there a way I could redraw all at once? (also do I need to incorporate the redraw into the plugin itself?)

Any advice appreciated!

2

Change script to

$('.expanding-grid').expandingGrid({
  onExpandAfter: function() {
    Webflow.require('slider').redraw();
  },
});

Also, feel free to contact me for further code help and/or customization of third-party plugins

3 Likes
3

Thank you once again @samliew, it works perfectly as usual!