Question

我正在尝试使Twitter Bootstrap轮播工作。幻灯片会更改默认超时后的显示方式，但是某种程度上指示器不会更改活动的类别，因此轮播不会更改幻灯片。

我尝试手动对轮播上的点击进行编程，但这还不够，因为幻灯片仅在点击时发生变化，默认情况下在一段时间后没有点击就没有变化。

我还检查了轮播项目上的“活动”类在点击时以及默认超时时间之后是否发生了变化。如上所述，“活动”类在单击控件时不会更改，但在超时后会更改。

在这里您可以找到我的轮播代码：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100 carousel-img carousel-img-1" src="resources/img/1x1.png" alt="First slide">
            <div class="hero-text-box">
                <blockquote style="color: white">
                    <div class="center-logo">
                        <div class="col-md-12">
                            <img class="d-block mx-auto" src="resources/img/logo-viereck.jpg" alt="Logo">
                        </div>
                    </div>
                    <q style="font-size: 150%">Besuche ich gern, wenn ich in der Nähe bin. Super Angebote zum fairen Preis. Die Theken und
                        Auslagen sind stets sauber. Das Personal ist auch sehr freundlich und auf Augenhöhe.</q>
                    <br>&minus;
                    <cite>Jörg B.</cite>
                </blockquote>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100 carousel-img carousel-img-2" src="resources/img/1x1.png" alt="Second slide">
            <div class="hero-text-box">
                <blockquote style="color: white">
                    <div class="center-logo pb-3">
                        <div class="col-md-12">
                            <img class="d-block mx-auto" src="resources/img/logo-viereck.jpg" alt="Logo">
                        </div>
                    </div>
                    <q style="font-size: 150%">Wie immer Super! Qualität, Service und Preis sind top. Einmal Bernys Cook immer Bernys Cook.
                        Selbst für weitgereiste und große Fahrzeuge ist immer ein Parkplatz vorhanden.</q>
                    <br>&minus;
                    <cite>Simon H.</cite>
                </blockquote>
        </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100 carousel-img carousel-img-3" src="resources/img/1x1.png" alt="Third slide">
            <div class="hero-text-box">
                <blockquote style="color: white">
                    <div class="center-logo pb-3">
                        <div class="col-md-12">
                            <img class="d-block mx-auto" src="resources/img/logo-viereck.jpg" alt="Logo">
                        </div>
                    </div>
                    <q style="font-size: 150%">Wie immer sehr schnell und äusserst lecker! Weiter so!! Sehr zu empfehlen! An alle Trucker:
                        Hier lohnt es sich einzukehren! Super Essen mit Allem drum und dran!</q>
                    <br>&minus;
                    <cite>Frank W.</cite>
                </blockquote>
            </div>
        </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>

Answer 1

尝试这个：-

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles">

    </div>

    <div class="item">
      <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Bootstrap轮播控件不会更改活动类

1 个答案: