为什么皇家滑块添加0px的高度和宽度？

我有一个皇家滑块设置在一个网站即时通讯工作。它在主页和我的产品页面上设置，其中我有一个部分显示不同div中的多个皇家滑块，用户可以在其中切换。为什么皇家滑块添加0px的高度和宽度？

我成功设置了产品页面中的第一个滑块，它显示正确。但是，当我到达同一节中的第二个皇家滑块，我可以看到高度和宽度都设置为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此页面上的第一个滑块是完全一样的是为什么我不明白为什么高度和宽度都不会被第二个滑块选中。

来源

2014-02-17 fnk

我发现从royalslider的制造者这一建议[链接]（http://s3.amazonaws.com/entp-tender-production/assets/0ad026b8a4b95640cd59b892b670a29005d009d8/Full_Width_Slider___RoyalSlider_Example.jpg?AWSAccessKeyId=AKIAISVUXXOK32ATONEQ&Expires=1392645713&Signature=sv5Y1uP5Czf33OYePCdqMcV4k1A%3D）但我不想以这种方式为每个断点添加css，因为我设法让第一个滑块工作而无需添加任何样式，并从我的JS文件中选择选项。 – fnk

创建一个小提琴演示或粘贴您的链接。否则很难假定什么是错的。 –

我不能粘贴链接，因为我在本地机器上的文件上工作。不知道如何创建一个小提琴。我检查了铬中的元素，发现我的div .royalSlider-prod2的高度设置为0px。当我检查元素.royalSlider-prod1高度设置为660px。我不明白为什么.royalSlider-prod2的高度为0时，我已经在选项中指定它。 – fnk

在同一页面上添加多个滑块并将其他设置显示为none（这是我不得不这样做的原因，因为我不希望它们全部在同一时间可见）会导致其他滑块获得高度和宽度为0px。我没有意识到这一段时间。最后，我使用了bootstraps旋转木马滑块，它完美地工作，无论我在页面上有多少滑块，都没有冲突。

来源

2014-02-21 11:55:28 fnk

为什么皇家滑块添加0px的高度和宽度？

回答

相关问题