Карусель Bootstrap 4 возвращается к первому слайду после щелчка, чтобы перейти ко второму слайду

Question

У меня небольшая проблема с использованием карусели Bootstrap 4 в моем приложении Angular 6.

Итак, у меня есть несколько слайдов, на первом слайде есть 3 кнопки, после нажатия которых пользователь должен выполнитьи перейдите к следующему слайду.Но они переходят к следующему слайду, вы видите анимацию и текст для следующего слайда, но затем он возвращается к первому слайду и «блокирует» его, если я нажимаю кнопку еще раз, он показывает текст других слайдов.но ничего не делает.

Вот мой код

HTML:

<div id="startCarousel" class="carousel slide" data-interval="false">
  <img src="assets/images/logo.png" alt="agendamento.vip">
  <div class="carousel-inner" role="listbox">
    <!-- IDIOMA -->
    <div class="carousel-item active language">
      <div class="option" (click)="setUserLanguage('pt-BR')" data-slide="next" role="button" href="#startCarousel">
        <div>
          Olá! Este é meu idioma.<br>(Português-Brasil)
        </div>
        <i class="ti ti-angle-right"></i>
      </div>
      <div class="option" (click)="setUserLanguage('en-US')" data-slide="next" role="button" href="#startCarousel">
        <div>
          Hello! This is my language.<br>(English)
        </div>
        <i class="ti ti-angle-right"></i>
      </div>
      <div class="option" (click)="setUserLanguage('es-ES')" data-slide="next" role="button" href="#startCarousel">
        <div>
          ¡Hola! Este es mi idioma.<br>(Español)
        </div>
        <i class="ti ti-angle-right"></i>
      </div>
    </div>
    <!-- PAÍS -->
    <div class="carousel-item country">
      Country
    </div>
    <!-- ESTABELECIMENTO -->
    <div class="carousel-item store">
      Store
    </div>
    <!-- CONTATO -->
    <div class="carousel-item contact">
      Contact
    </div>
    <!-- FINALIZADO -->
    <div class="carousel-item done">
      Done
    </div>
  </div>
</div>

CSS:

#startCarousel {
    width: 100vw;
    height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;

    .carousel-inner {
        height: 100%;
        width: 100%;
    }

    .carousel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }

    .option {
        display: grid;
        grid-template: 1fr / 90% 10%;
        width: 300px;
        border: 1px solid #333;
        border-radius: 15px;
        margin-bottom: 20px;
        cursor: pointer;

        div {
            padding: 10px;
        }

        i {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.3rem;
        }
    }
}

Есть ли шанс, что мой CSSвызывает эту проблему?Или я что-то упустил?Вот мое поведение