为什么Royal Slider添加0px的高度和宽度？

Question

我在正在处理的网站上设置了皇家滑块。 它在主页和我的产品页面上进行设置，在该页面上，我有一个部分可以在不同的div中显示多个皇家滑块，用户可以在它们之间进行切换。

我已经成功设置了产品页面中的第一个滑块，并且可以正确显示。 但是，当我到达同一部分的第二个Royal滑块时，我看到高度和宽度都设置为0px，我不知道为什么吗？ Ive在royalslider的支持论坛上进行了搜索，但是我找不到任何可以帮助我理解为什么发生这种情况的信息。

这是第二个滑块的HTML：

    <div class="container">
                <div class="row toggle-prod ps2">
                    <div class="span7">
                        <div class="royalSlider-prod2 rsDefault">
                            <img class="rsImg" src="/IMG-1.jpg" width="670" height="660"/>
<img class="rsImg" src="/IMG-2.jpg" width="670" height="660"/>
                        </div>
                    </div>
                    <div class="span5">
                        <p>PhoneShield 2 (PS2)</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>

这是滑块的JS：

$(".royalSlider-prod2").royalSlider({
        keyboardNavEnabled: true,
        autoScaleSlider: true,
        slidesSpacing: 0,
        imageScalePadding: 0,
        loop: true,
        navigateByClick: false,
        arrowsNav: false,
        autoScaleSliderWidth: 670,
        autoScaleSliderHeight: 660,
        controlsInside: false,
        autoPlay: {
            enabled: true,
            pauseOnHover: true,
            delay: 5000
        }
    });

此页面上第一个滑块的JS完全相同，这就是为什么我不明白为什么要为第二个滑块拾取高度和宽度的原因。

Answer 1

在同一页面上添加多个滑块并设置其他滑块不显示（这是我要做的，因为我不希望它们同时可见），导致其他滑块的高度和宽度为0px。 我有一段时间没有意识到这一点。 最后，我使用了bootstraps传送带滑块，该滑块可以完美工作，并且无论页面上有多少个滑块，都不会发生冲突。