Button to select which carousel to display

You can include in the button a generic class to identify the click and a "data" attribute identifying the carousel to be shown, for 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>

OBS: I noticed that there is an extra </div> tag 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 with CSS , but depending on your HTML structure may need some JS. Anyway follow an example working for you to see.

Notice that the " ~ " and " +" selectors require a certain HTML structure because the .carousel is at the same level of inputs and CSS hits them. (qq doubt just ask)

See the model working. The cat's leap 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><divid="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 did not need to tinker with your HTML, I just added the labels and inputs and their CSS.