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

Question

我使用适用于iPad和iPhone的Flexslider创建了一个响应式滑块。我的滑块在两个设备上有不同的内容。假设iPad上有1张幻灯片，iPhone上有2张幻灯片。我在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>