Slider dots in modal invisible (solved), same with map (not yet)

Design help Custom code
1

Hello guys!

1. Strange problem — slider dots in modal don’t appear, but if I make modal display from none to block (so u can see it when site opened) slider dots appeared.

1047×659 178 KB

1175×661 184 KB

2. Map in modal window doesn’t appear (u can open it by clickin link under H1 heading).

Designer: https://preview.webflow.com/preview/cars-test?preview=830bf7709e1a75f6dbdcea5e8cdcad9a
Live: http://cars-test.webflow.io

2

Preview link is broken until further notice. Please re-post your share link when it is fixed.

3

Oh, sry, here it is: https://preview.webflow.com/preview/cars-test?preview=830bf7709e1a75f6dbdcea5e8cdcad9a

4

Hi @ForFood, I am unable to see your slider and map on the page. Could you add interactions to open your custom modal?

5

Hm, don’t get it, but made 1 modal visible, it’s slider dots are visible too, but if u close it and open another car, dot’s aren’t visible.
Designer: https://preview.webflow.com/preview/cars-test?preview=830bf7709e1a75f6dbdcea5e8cdcad9a
Live: http://cars-test.webflow.io

6

This looks like a bug. Sliders have to be visible in the page on load, otherwise JS error

webflow.35c9bd168.js:3800 Uncaught TypeError: Cannot read property ‘mask’ of undefined

7

Hi @ForFood, as mentioned by @samliew, since the slider is set to display none on load, the widget does not work as expected when the modal window is opened.

In the custom code where you have the fadein code, replace that with the below:

<script type="text/javascript">
$(document).ready(function() {
  $('.car-link-block-1').click(function() {
    $('.modal-background-1').fadeIn();
    Webflow.require('slider').redraw();
  });
  $('.close-modal-btn').click(function() {
    $('.modal-background-1').fadeOut();
  });
});
  
  $(document).ready(function() {
  $('.car-link-block-2').click(function() {
    $('.modal-background-2').fadeIn();
    Webflow.require('slider').redraw();
  });
  $('.close-modal-btn').click(function() {
    $('.modal-background-2').fadeOut();
  });
});

  $(document).ready(function() {
  $('.car-link-block-3').click(function() {
    $('.modal-background-3').fadeIn();
    Webflow.require('slider').redraw();
  });
  $('.close-modal-btn').click(function() {
    $('.modal-background-3').fadeOut();
  });
});

  $(document).ready(function() {
  $('.adress-link-block').click(function() {
    $('.modal-background-4').fadeIn();
    Webflow.require('slider').redraw();
  });
  $('.close-modal-btn').click(function() {
    $('.modal-background-4').fadeOut();
  });
});
</script>

This code above adds the Webflow.require(‘slider’).redraw(); command to redraw the slider after the modal is opened.

I did not have a chance to check the map yet…

After replacing the code, republish the site. I hope that helps.

2 Likes
8

Oh, big thanks, it works!

9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.