Javascript 使用css在滑块中隐藏html元素

Iam使用此滑块作为完全背景滑块。我在主类中添加了一些图像：-

   <style>
       .mobile {
           visibility:hidden;
       }
       @media(max-width:480px) {
           .desktop {
               visibility:hidden.
           }
           .mobile {
               visibility:visible;
           }
      }
</style>
<ul id="cbp-bislideshow" class="cbp-bislideshow">
                <li class="desktop"><img src="images/1.jpg" alt="image01"/></li>
                <li class="desktop"><img src="images/2.jpg" alt="image02"/></li>
                <li class="mobile"><img src="images/mobile/1.jpg" alt="image03"/></li>
                <li class="mobile"><img src="images/mobile/2.jpg" alt="image04"/></li>
</ul>

.手机{
可见性：隐藏；
}
@介质（最大宽度：480px）{
.桌面{
可见性：隐藏。
}
.手机{
能见度：可见；
}
}

我想显示的是有类桌面的图像，隐藏类移动设备的图像，如果浏览器的最大宽度为480px，还想隐藏类桌面和显示类移动设备。但在显示了班级桌面的图像后，它显示了我不想要的白色屏幕。

---

请提供帮助。

分别使用

display:none

和

display:block

而不是

可见性：hidden

和

可见性：visible

，如下所示：

<style>
       .mobile{
          display: none !important;;
       }
       @media (max-width:480px) {
       .desktop{
            display: none !important;;
        }
         .mobile{
          display: block !important;;
       }
   }
</style>

.手机{
显示：无！重要；；
}
@介质（最大宽度：480px）{
.桌面{
显示：无！重要；；
}
.手机{
显示：块！重要；；
}
}

您是否已尝试使用

显示：无而不是
可见性：隐藏？使用
显示
而不是
可见性
。。。可见性为用户保留了空间element@matthias_h我尝试过使用display，但在显示了类桌面图像后，它仍然会显示白色屏幕。我刚刚在示例页面上尝试过，但是由于js的原因，仅仅使用css是不起作用的。js统计所有图像并导航到所有图像。如果你在手机上等，你可以调整js忽略类mobile的图像，如果不是，下一个图像将被“显示”；如果此图像有显示：无，您将获得此图像的白色屏幕。您可以尝试的是：添加两个滑块，一个用于桌面幻灯片，一个仅用于移动，并且仅在
var$slideshow=$（“#cbp bislideshow'）
处初始化相应的滑块，然后您可能可以节省时间来调整js。