Slider rendering incorrectly within a hidden div

  • daphnel

    (@daphnel)


    7 years, 11 months ago

    I’m currently locally trying to include a slider+thumblist within a hidden div on a product page similar to this page here. It would be replacing the current 3D viewer within the hidden div. I have used jQuery .hide(); and .slideDown(); for the hide/reveal function.

    When the div is revealed (by clicking on any one of the products), the slider does not render properly – see here. The slider and thumbnails appear with a large top and left margin, and does not follow the container it is in. If the window is resized, the slider seems to fix itself, but the thumbnails still retain its large margins – see here.

    Any suggestions on how to fix this issue? Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor averta support

    (@averta_support)

    7 years, 11 months ago

    Hi,

    Thank you for choosing Master Slider.

    You need to use a code like the below one, on Slider Callbacks > On slider init :

    jQuery('#btn').click(function(){
  masterslider_instances[0].api.update(true);
});

    You can change #btn to any selector you want.

    If you need any further information, please let me know.

    Best,

    Thread Starter daphnel

    (@daphnel)

    7 years, 11 months ago

    Hi Averta Support,

    Thank you for your response! I pasted the code in Slider Callbacks > On slider init of the slider being used on the page and replaced #btn to my selector, .nav but it made the slider disappear altogether.

    I then incorporated masterslider_instances[0].api.update(true); into my own jQuery hide/reveal function and it seems to work but only for the first slider. I figured out to make the next slider work, a new line had to be added with 0 replaced by the next number: masterslider_instances[1].api.update(true);.

    However, as I have another person updating the site without access to the jQuery hide/reveal function, would there be another way to handle this?

    Thanks so much!

    Plugin Contributor averta support

    (@averta_support)

    7 years, 10 months ago

    Hi,

    Sorry for the delay in replying.

    Please choose the slider you want. Then go to Slider Callbacks tab > On slider init and put this code there :

    jQuery('#btn').click(function(){
    api.update(true);
});

    Please let me know the result.

    Best,

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Slider rendering incorrectly within a hidden div’ is closed to new replies.