0

I'm working in a website for mobiles, tablets and desktops. This website in its desktop layout has a carousel that it is defined in the html like this:

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

Class carousel-slide define an slide of the carousel, and carousel-slide-active, the slide being showed at the moment (controled by Javascript).

For the mobile layout, I don't want to show this carousel. My idea is to show just the first slide (each slide is basically a background color and an image). The question is, how can I do this? Actually I'm using CSS media queries to rearrange all the elements in each device but I don't know how to hide all unused slides and disable the Javascript (this javascript controls the background code (random) and the positioning). Which is the cleanest way to replace the carousel with a simple div with the image and a random color?

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が表示されます。親が非表示になっているため、アクティブな div 内のすべての html 要素も非表示になります。

!importantJavaScript によって作成されたいくつかのスタイルをオーバーライドする必要がある場合は、これらの 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 に答える