How to redraw slider (in modal) when modal window opens

Design help General
1

We have a slider in a modal popup that is initially hidden. The popup is displayed with a click on a button on the parent webpage, then closed with a click on a button on the popup. When the popup is displayed the first time, the slider starts doing its trick beginning with the first slide. But after the popup is closed, the slider continues doing its trick because the popup is only hidden. So, the next time the popup is displayed the slide shown in the slider is whatever slide the slider happens to be on at that moment as it continues doing its thing.

Is there a way to stop and reset the slider to the first slide when the popup is closed? We want the popup to begin with the first slide every time the popup is displayed.

Thanks! Bill

2

Hi @Bill616, thanks for the good question. Are you using a custom modal with Javascript? Or are you using a modal window created using interactions?

A link to the site would be very helpful: Share a read-only link | Webflow University

One thing to try, if using a javascript modal, is to include the slider redraw function just after the fadein, for example:

$(document).ready(function() {
  $('.modal-open').click(function() {
    $('.modal-window').fadeIn();
    Webflow.require('slider').redraw();
  });
  $('.close-modal').click(function() {
    $('.modal-background-1').fadeOut();
  });
});

I hope this helps!

3

Thanks for your prompt reply, Dave.

Our website has no custom JavaScript. Everything is designed in Webflow, and we use the native Webflow HTML code exactly as exported.

Unfortunately, our client will not allow us to share the website link publicly, but I am not sure how that would help anyway. It seems clear that sliders always – and automatically - start over from slide 1 when its parent webpage is opened because doing refreshes the slider. However, a slider in a modal popup does not start over from slide 1 because the popup is just displayed and hidden, and is not refreshed unless the parent webpage is closed and reopened, which we don’t want to do.

So, my question is really generic: Is there a way, using Webflow transitions only, to force a slider to start over from slide 1 without closing and reopening the parent webpage?

– Bill

4

@Bill616

I believe there is no such transition in webflow that does reset a slider.

However, if you use script above which @cyberdave gave it will solve your problem.

Cheers

1 Like
5

Hi @Bill616, thanks for the reply. Yes, unless some custom javascript is used, it is not yet possible to redraw the slider using interactions alone.

If you want to check out how to make a custom modal using a little javascript, check here: http://forum.webflow.com/t/tutorial-how-to-create-a-modal-pop-up-in-webflow/1229/5

I think that having the option to redraw the slider when it becomes visible would be awesome, and a good addition to the Wish List.

6

Thanks, Dave. We’re trying to avoid climbing the JavaScript learning curve as well as the Webflow learning curve, so we have simply modified our design so that not being able to restart the slider isn’t too visually offensive. But you are right: The Webflow wizards should add the redraw/restart capability to our arsenal.

Ciao!

– Bill

9

Hi Cyberdave,

I was hoping this post would help me as im having a similar issue but it didnt. I have a popup that i made using interactions. The modal is hidden initially… Click a button and the modal pops up with a slider and some tabs inside. The slider will not work at all unless I click on the “tabs” that i also have in the popup although the slider is not inside any of the tabs. Hmmm. I wouldnt want to have to click on the “reviews” tab in order for the slider to work. Heres a link to my page and directly to the section with the “quickview” popup. http://lisas-first-project-a3dc05.webflow.io/#categories I thought rewriting your fix like this would help but no luck. Ive also put in the name of the class of the slider “.qvslider1” with no luck.

$(document).ready(function() {
$(‘.quickview1’).click(function() {
$(‘.quickview_popop1’).fadeIn();
Webflow.require(‘slider’).redraw();
});
$(‘.quickview_popop_close_btn’).click(function() {
$(‘.quickview_popop1’).fadeOut();
});
});

Thanks in advance for any help!

10

Im guessing its because i used interactions to build it instead of javascript and theres no way to do it unless i go back and redo all of the popups in js. sigh

11

Hi @Bill616 and @cyberlisa ,

As we can’t see the slider, can you tell us what is the slider doing. If it is auto sliding OR arrow button sliding I might have a solution but not if you require both of the functionalities.

12

Hi and thanks for responding. The slider has both arrows and i put auto play on it hoping that would make it work. If you click on the link you will see the categories of “hair”. Each one has a quickview button “magnifying glass icon”. If you click on it you can actually see the slider there. It has the arrows which when clicked do not function at all but should slide the photos. Ironically if I click on one of the tabs that are in that popup, but that do not contain the slider, the slider resets or redraws somehow and is then working. Heres the link and section. Click the little magnifying glass to see the popup and non working sliders. http://lisas-first-project-a3dc05.webflow.io/#categories

13

@cyberlisa

Hey Lisa. I believe this script will help you;

<script>
    $(document).ready(function(){
        $('.category_icons.quickview1').each(function(){
            $(this).click(function(){
                setTimeout(function(){
                    Webflow.ready()
                },500);
            });
        });
    });
</script>
1 Like
14

@cyberlisa, any chance we could have a look to a read-only on this one?

15

Not sure how to get a read only? Please advise!

16
17

TY :slight_smile: https://preview.webflow.com/preview/lisas-first-project-a3dc05?preview=1c3f63dbbd885f5ef5a3a7294e9ae1ee

18

I should tell you that there are times, like right now, when the sliders will work when in preview mode inside the designer. Some are working and some are not. Like the first one is working right now and the second one isnt BUT once published NONE OF THEM WORK IN THE quickview popup!

19

Hi @cyberlisa,

I don’t have all the answers on how the webflow slider is made behind the scenes but I suspect that this behaviour can come from the fact that it is hidden when the page load and therefore the initialisation of the slider might be broken. Which would explain as well why it start working after clicking a tab (probably some redraw of the elements inside the tabs).

2 things from here that could help you out.

1 - Could you try changing the interaction to make the modal appear. (show quickview)
Instead of using hide/show you can test the following.

a - Add an initial state moving the modal -100vh on the y axis (as it is fixed positioned it would be off screen)
b - Add an animation back to 0vh just before the opacity and set its duration to 0 second
c - Remove the hide/show interaction
(you can keep the initial state for convenience in the designer but set it to block instead of hidden)
d - Do the same step for the closing modal interaction

41
41482×1170 52.5 KB

Let me know if it does the trick for the published site.

2 - Otherwise, I did recently a custom slider tutorial which rely only on interactions and would give you more controls on how to display the different element. The downside of it is there is no autoplay feature on it but at least you could have a way to reinitialise the slider to slide 1 when closing the modal. You could even go with a webflow slider with autoplay for the page and my custom slider for the modal to have the best of both world.

Here is the thread where you can find the tutorials and the link to my project to explore the setup:

Let me know if you get further question which I might help with.
I hope it helps.

Max

20

Thanks or the response. I had considered the visibility hidden as well but preferred a quick solution since theres so many popups throughout the site. sigh. But hey… I am pretty sure your solution will work or at least it should in theory.

The original question about slider redraw was 2 years ago so I was hoping that, being a newbie, there was a current way to redraw it by now.

21

Hi, right now I am having the same problem… slider inside a modal (built in webflow) with display None … when I show the modal (using a button) the slider does not work. At this point is there any solution for this? Thank you.

22

I have found a “solution”, without custom code.

1- Removed Display: None from Set as initial state of the modal in the Element trigger interaction (a button in the page).
2- I created a Page trigger > When page finishes loading with display: flex and then display: none … as initial state of the modal .

Since the opacity of the initial state of the modal (In Element trigger interaction) is 0, when the page finishes loading, the modal (display: flex, opacity: 0) updates the slider component and then disappears (display:none, opacity: 0) without being seen by the users.

Later, if the modal is triggered by the page button, it will have all the slider information preloaded.

In my case it’s just one modal with a slider so it does not affect the loading time.

It may also work When Page Start Loading

regards

2 Likes