Slider in Pop-Modal not 'sliding'

Community resources Bugs
12

Ok… here’s the the problem - and the fix I came up with.

The problem is… if the SLIDER’s display property is set to NONE…

  • the SLIDER cannot update the element (itself).

Because of this… the SLIDER cannot load / add additional images to the SLIDER…

  • it only loads the first image “onLoad()” (when the form loads).

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

is suppose to force the element (SLIDER) to redraw itself

  • but I could not get it to work. Not sure why.

So what I did…

  1. Create the modal DIV
  2. Add the SLIDER into the DIV
  3. Add whatever images / set whatever properties you need for the SLIDER
  4. Class the DIV (ie: div_Modal-Images)

---- FIX STARTS HERE
5) Create an INTERACTION for the DIV (div_Modal-Images)

The only thing the INTERACTION will do is

  • change the opacity to ZERO (0) onLoad() (when the form Loads) of the DIV (div_Modal-Images).

You can do this directly in JQuery instead…

  • but then I have to explain more about jquery
  • and I’m trying to make this fix short and easy to understand.

  1. Set Properties for DIV (div_Modal-Images) - Position: FIXED FULL WINDOW, z-Index: -10

235×920 60 KB

z-index

You don’t want the SLIDER to be on top of everything…

  • if it is… it will make it difficult for you to work on your project
  • because the SLIDER will block / cover everything under it

So make z-index of the DIV (div_Modal-Images)

  • negative 10 (-10)… and it will push the DIV (div_Modal-Images) under everything else

This will make it difficult to see the forms background…

  • but at least you can see the form.

Add this code to your CUSTOM CODE - FOOTER

<script type="text/javascript">

    $(document).ready(function() {
      $('.div_Modal-Images').click(function() {
        $('.div_Modal-Images').fadeIn();

        $('.div_Modal-Images').css('z-index', 10000);        
        $('.div_Modal-Images').css({ opacity: 1 });
        
      });
    });

</script>

This line will target the SLIDERs parent DIV (div_Modal-Images)

  • and change it’s z-index from -10 to 10000

  • which will place the element “at the top” of the form.

          $('.div_Modal-Images').css('z-index', 10000);

This line will target the SLIDERs parent DIV (div_Modal-Images)

  • and change it’s opacity from 0 to 1

  • which will make it visible.

          $('.div_Modal-Images').css({ opacity: 1 });

NOTE: To make it “simpler” and less “talk”

  • I did not include a close button in the code.

You will be able to see the open the SLIDER and see images

  • you just can’t close it. Just add a link in the SLIDER and have JQUERY hide the SLIDER.
1 Like