Streaming live at 10am (PST)

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


#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


Interactions effecting slider functionality
Sliders and Tabs not rendering as expected in Pop up
Slider stop when click or tap
#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: http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

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


#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