Button to select which carousel to display

Question

I created two carousel one of Illustration and the other of Plan of a house, and I need two buttons, Illustration and Plant, when loading the page, will show the illustration carousel as main, and when clicking on the plant carousel should hide illustration, and so vice versa.

Example:

<button class="ative btn btn-outline-info">ILUSTRAÇÃO</button>
<button class="ative btn btn-outline-info">PLANTAS</button>

<div id="bannerIluminacao" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="Imagem.png"></div>
      </div>
   </div>
</div>

Plant code:

<div id="bannerPlantas" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="Imagem.png"></div>
      </div>
   </div>
</div>

Answer 1

You can include on the button a generic class to identify the click and an attribute "date" identifying which carousel should be shown, example:

<button class="ative btn btn-outline-info showCarousel" data-id="ilustracao">ILUSTRAÇÃO</button>
<button class="ative btn btn-outline-info showCarousel" data-id="plantas">PLANTAS</button>

<div id="bannerIluminacao" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="Imagem.png"></div>
      </div>
   </div>
</div> 

<div id="bannerPlantas" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="Imagem.png"></div>
      </div>
   </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(".showCarousel").on("click",function(e){
            var id = $(this).data('id');
            if(id == "ilustracao")
            {
                $("#bannerIluminacao").show();
                $("#bannerPlantas").hide();
            }
            else
            {
                $("#bannerPlantas").show();
                $("#bannerIluminacao").hide();
            }
        });
    });
</script>

Answer 2

OBS: I noticed that there is a tag </div> too close in your code! I recommend removing this tag after the image! <img class="d-block w-100" src="Imagem.png"></div>

I made a basic example only with CSS, but depending on your HTML structure you may need some JS. Anyway follows a working example for you to see.

Note that the selectors " ~ " and " + " need a certain HTML structure because div o .carousel is in the same level of inputs and the CSS reaches them. (When a question is just a question)

See the model working. The cat jump here is to use a hidden "radio button" to switch between a div and another.

.carousel {
    margin-top: 20px;
    transition: 350ms;
    position: absolute;
    opacity: 0;
}
#ilustra:checked ~ #bannerIluminacao.carousel, #planta:checked ~ #bannerPlantas.carousel {
    opacity: 1;
}

input[type="radio"] {
    display: none;
}
label {
    display: inline-block;
    color: #fff;
    width: 100px;   
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: black;
    cursor: pointer;
    transition: 350ms
}
#ilustra:checked + label, #planta:checked + label {
    background-color: red;
}

<input type="radio" name="slider" id="ilustra" checked>
<label for="ilustra">Ilustração</label>
<input type="radio" name="slider" id="planta">
<label for="planta">Planta</label>

<div id="bannerIluminacao" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="http://unsplash.it/200/200">
        </div>
    </div>
</div>

<div id="bannerPlantas" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://baconmockup.com/200/200">
        </div>
    </div>
</div>

OBS: I didn’t have to touch your HTML, I just added the labels and inputs and their CSS.