PortaFront/src/components/carrusel.vue

<template>
  <div class="divMaster row my-5">
    <div
      id="carouselExampleControls"
      class="carousel slide col-md-10 col-lg-10 col-xl-10  col-12 mx-auto"
      data-ride="carousel"
    >
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
            class="d-block w-100 img-fluid"
            alt="img"
          />
        </div>
        <div class="carousel-item">
          <img
            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
            class="d-block w-100 img-fluid"
            alt="img"
          />
        </div>
        <div class="carousel-item">
          <img
            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
            class="d-block w-100 img-fluid"
            alt="img"
          />
        </div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleControls"
        role="button"
        data-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="carousel-control-next"
        href="#carouselExampleControls"
        role="button"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.divMaster {
  height: auto;
}
</style>