Lightslider - 第一个 img 直到窗口调整大小才显示答案

【问题标题】：Lightslider - first img not showing until window resizeLightslider - 第一个 img 直到窗口调整大小才显示
【发布时间】：2016-10-13 19:33:13
【问题描述】：

我正面临一件奇怪的事情。我正在使用lightslider 来显示我的img-s。现在，当我在常规 dom 中使用它时，打开的那个一切正常。但有时我会在我的常规窗口之上显示一个模式窗口，并且我遇到的问题是第一个 img 从未显示。我可以滚动到其他人，但是当我选择第一个节目时，它会出现一秒钟然后消失。经过一番尝试后发现，当我（手动）调整浏览器窗口的大小仅一个像素时，我可以选择第一个 img（如果它已被选中但不可见，它会自行显示）

有谁知道可能是什么原因，或者如果不知道，我如何模拟窗口调整大小的行为（这将是快速而肮脏的解决方案）？

问候

【问题讨论】：

嗯，这有点复杂，因为它是更大事物的一部分，但我会看到创建 smt
我在这里得到它：jsfiddle.net/vd1phq0n，这个问题只是它根本没有出现。当我调整它的大小时，它会显示出来，但是我无法显示我的问题（bcz 调整大小也解决了我的问题）
但即便如此，当你调整它的大小时，你可以看到不是第一个而是第二个被选中
我更新了您的fiddle，但我无法理解。我添加了 wimdow 调整大小事件...对不起。

标签： javascript jquery html css image

【解决方案1】：

你可以把这个$( window ).resize();放在脚本后面。那应该行得通。但是，您也可以使用以下代码 sn-p：

onSliderLoad: function() {
    $( window ).resize();
}, onAfterSlide: function() {
    $( window ).resize();
}

这个脚本$( window ).resize();不要用太多，因为jquery会报错“exceeded RangeError: Maximum call stack size exceeded”，如果报错就用一个$( window ).resize();

【讨论】：

非常感谢！！我现在一直在寻找这个解决方案

【解决方案2】：

任何人在轮播时仍然遇到此问题。快速解决方法是在 ID 之间切换，其中一个 ID 具有“height:0px”并隐藏了溢出。这个真的真的杀了我所以希望它可以帮助那里的人。

#demo {
  visibility: hidden;
  overflow: hidden;
  height: 0px;



}
#demo_visible {
  overflow: hidden;
}


   jQuery(document).ready(function ($) {
        $(".arrow_link").click(function (e) {
            e.preventDefault();

    if ($(".demo").attr('id') == 'demo_visible') {

                $(".demo").attr('id', 'demo');

            } else {

                $(".demo").attr('id', 'demo_visible');

            }
        });
    });

【讨论】：

【解决方案3】：

你可以把 $(window).resize();在 lightSlider() 脚本之后。

你也可以使用以下代码sn-p：

setTimeout(() => {$( window ).resize()}, 500);

这里可以使用 setTimeout 函数，因为在加载 DOM 之前会执行一些时间脚本。

【讨论】：