CODEWITHSUNDEEP
javascriptcsshtmlmedia-queries
David Moreno García
David Moreno García

Reputation: 4523

Replace carousel with single div in CSS using media queries

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?

Upvotes: 0

Views: 1438

Answers (1)

rescuecreative
rescuecreative

Reputation: 3859

You can't disable the JavaScript unless your carousel plugin has a built-in method for it. If it doesn't have that, there is just no way.

Assuming all of the carousel slides actually appear inside of the carousel-slide-active div, you can do something like this:

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

This will make sure your "active" div is hidden and the other one is displayed. All html elements inside of the active div will also be hidden because their parent is hidden.

You can potentially add the !important flag to those css properties if you need to override some styles being created by the JavaScript. In that case it would look like this:

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

Upvotes: 1

Related Questions