Question

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

我设法设置的产品页面中的第一个滑块，它正确显示。然而，当我到达同一部分的第二个皇家滑块时，我可以看到高度和宽度都设置为0px，我无法弄清楚为什么？我看过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

在同一页面上添加多个滑块并将display none设置为其他滑块（这是我必须要做的，因为我并不希望它们同时全部可见）导致其他滑块获得0px的高度和宽度。我有一段时间没有意识到这一点。最后我使用了bootstraps轮播滑块，它完美无缺，无论我在页面上有多少滑块，都没有冲突。

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

1 个答案: