javascript - 使用媒体查询在 CSS 中用单个 div 替换轮播

Question

我在手机、平板电脑和台式机网站上工作。该网站的桌面布局有一个旋转木马，它在 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 替换轮播的最简洁方法是什么？

Answer 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 元素也将被隐藏，因为它们的父元素是隐藏的。

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

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