0

我正在为手机、平板电脑和台式机开发一个网站。该网站在其桌面布局中有一个轮播，它在 html 中定义如下：

<div id="carousel">
  <div class="carousel-slide carousel-slide-active">
  </div>
  <div class="carousel-slide">
  </div>
</div>

carousel-slide 类定义了一个轮播的幻灯片，carousel-slide-active，当前正在显示的幻灯片（由 Javascript 控制）。

对于移动布局，我不想展示这个轮播。我的想法是只展示第一张幻灯片（每张幻灯片基本上都是背景颜色和图像）。问题是，我该怎么做？实际上，我正在使用 CSS 媒体查询来重新排列每个设备中的所有元素，但我不知道如何隐藏所有未使用的幻灯片并禁用 Javascript（此 javascript 控制背景代码（随机）和定位）。用带有图像和随机颜色的简单 div 替换轮播的最干净的方法是什么？

4

1 回答 1

1

除非您的轮播插件有内置方法，否则您无法禁用 JavaScript。如果没有那个，那就没有办法了。

假设所有轮播幻灯片实际上都出现在 carousel-slide-active div 中，您可以执行以下操作：

@media screen and (max-width: 700px) {
  .carousel-slide {
    display: block;
  }
  .carousel-slide.carousel-slide-active: {
    display: none;
  }
}

这将确保您的“活动” div 被隐藏并显示另一个。活动 div 内的所有 html 元素也将被隐藏，因为它们的父级是隐藏的。

!important如果您需要覆盖 JavaScript 创建的某些样式，您可以潜在地将标志添加到这些 css 属性中。在这种情况下，它看起来像这样：

@media screen and (max-width: 700px) {
  .carousel-slide {
    display: block !important;
  }
  .carousel-slide.carousel-slide-active: {
    display: none !important;
  }
}
于 2013-10-02T21:15:04.713 回答