Hide Carrousel images when opening on mobile and show others - Bootstrap 4

Navigation
0

I'm using the Carrousel component of bootstrap 4.

My intention is to make the slide show with original images when opened in the PC and Tablet.

When you open it on your phone, open another lighter image.

  

Carrousel: link

     

Grid: link 

<div id="carouselInicio" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="imagens/carrosel-site.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="imagens/carrosel-app.jpg"  alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="imagens/carrosel-arquitetura.jpg" alt="Third slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="imagens/carrosel-projetos.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselInicio" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Anterior</span>
    </a>
    <a class="carousel-control-next" href="#carouselInicio" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Próximo</span>
    </a>
</div>
    
asked by anonymous 20.07.2017 / 16:15

1 answer

1

Use media queries, try the following: 

#carouselInicio
{
  @media screen and (max-width: 720px)
  {
    display: none;
  }
}

#img-mobile
{
  display: none;
  @media screen and (max-width: 720px)
  {
    display: block;
  }
}
    
20.07.2017 / 16:23
Problem opening a new Activity Insert Table ID with 13,346 rows with LOOP