Javascript 如何在flexslider的不同设备上删除空白幻灯片？

我已经为iPad和iPhone使用Flexslider创建了一个响应性滑块。我的滑块在两台设备上有不同的内容。假设我在iPad上有一张幻灯片，在iPhone上有两张幻灯片。我在iPad上自动得到一张空白幻灯片。有没有神奇的方法去除iPad上的空白幻灯片？

我的css：

iPhone-only{display:none !important;}
iPad-only{display:none !important;}
@media (max-width: 320px){
iPhone-only{ display:block !important}
}
@media (min-width:768px) and (max-width:1024px){
iPad-only{ display:block !important}
}

我的Html：

 <div class="flexslider">
      <ul class="slides">
         <li> <div class"iPad-only"> iPad Slide 1 </div> <div class"iPhone-only> iPhoneSlide1 </div </li>
         <li> <div class"iPhone-only"> iPhone slide 2 </div>  </li>
      </ul>
 </div>

iPad幻灯片1分享屏幕截图。如果没有它们，将很难想象视图。您只是将内容隐藏在LI中，而不是LI本身——因此现在您自然会得到一张“空”幻灯片，因为幻灯片是根据列表项创建的。请尝试隐藏列表项本身。如果这也不起作用（不知道flexslider是否检查元素可见性），那么您可能必须在初始化滑块之前从DOM中删除LI元素。谢谢大家的评论@我试着藏起来，但是我发现了一个小虫子。幻灯片向下跳约20像素。我想这与flexslider css有关：.flexslider.slides>li{display:none；}你有什么建议来解决这个问题吗？@CBroe，我是css&html的新手。请您详细解释一下“在初始化滑块之前，您可能必须从DOM中删除LI元素。”还有一件事是隐藏整个LI元素不会删除整个幻灯片。这两款设备的幻灯片数量相等，所以我在iPad上仍然可以看到两张幻灯片，这是第一张幻灯片的复制品，而不是空白。这个反应很晚，但我认为它可以帮助别人。Flexslider基于js，因此当它初始化时，它会选择所选的图像。如果在dom中更改它们，则必须重新初始化flexslider js。你可以1。设置css，然后立即重新初始化。