Question

我在Angular 6应用中使用Bootstrap 4传送带时遇到了一些问题。

因此，我有一些幻灯片，在第一张幻灯片中，有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是否有可能导致此问题？还是我错过了什么？这是我的行为

单击以转到第二张幻灯片后，Bootstrap 4轮播会返回到第一张幻灯片

0 个答案: