Slider dont work inside modal window

Design help General
1

Hello webflow dude´s,

I have used the modal window this [Tutorial] How to create a modal/pop-up in Webflow - Webflow Tips - Forum | Webflow and had no problem with it.
But i notice when i insert the slider inside the modal, the slider stops working.

Anyone had this problem before?

tks
Rui Almeida

2

Same problem here… Tried it before, but gave up :frowning:

3

Must be some jQuery conflicts. Any ideas @danro?

4

Hi guys, I’d have to see a breaking example to know what might be causing the error.

Thanks!

5

Hi Danro,

Here it is http://iloveazores.webflow.com/testing

I put the slider inside the modal and it not works.
One strange thing i notice, i only have 2 slides, one red, one blue, but when i publish the site, he automatically inserts one more slide. Strange.

Hope you can help me
Rui

6

Looks like this is happening because the modal is set to display: none when the page loads, and the Slider is unable to update its layout when it is hidden.

You can fix this by adding this code just after your call to fadeIn():

Webflow.require('slider').redraw();

And it should redraw the slider before it comes into view.

1 Like
7

Dude, you hit the spot :smiley:
Behind a great software, there´s a great support

tks
Rui Almeida

9

Alllllright lets get back to this one! So I take it we should substitute “Slider” with whatever class we have given our slider. Also, copy pasting the code you have posted above and that code only seems to not suffice? Are there any potential closing tags that should be added at the end of that script above to make it work?

11

Just FYI, I had the same issue while using JQuery to dynamically load slider content inside home page.
Calling Webflow.require('slider').redraw(); upon successful load() fixed the issue.

12

Hi there. I would like to know where I can insert into the code this part

Webflow.require(‘slider’).redraw();

This is my website: https://preview.webflow.com/preview/ttf-azul?preview=0c29e56dc36a43395fcd30587a040f3b and the interaction is on the first square: Carlos Pratas CEO VP Consulting

Thanks!

13

Hi @c_weare, thanks for the post. Go to your custom code. Look for this line:

$('.modal-background').fadeIn();

insert the redraw code right after, so it should look like:

$('.modal-background').fadeIn(); 
Webflow.require('slider').redraw();

Do that for each occurence of $('.modal-background').fadeIn(); in your custom code. After making changes, republish the site.

I hope this helps, cheers, Dave