轮播不适用于bootstrap v4

Question

我正在开发一个Web项目，但面临轮播问题，它无法通过单击甚至自动移动到下一幅图像。 以下是我的代码：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="carousel-testimonial" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-testimonial" data-slide-to="0" class="active"></li> <li data-target="#carousel-testimonial" data-slide-to="1"></li> <li data-target="#carousel-testimonial" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active text-center"> <img src="images/client-01.jpg" alt="testimonial" class="center-block"> <div class="testimonial-caption"> <h2>Danial</h2> <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip."</p> </div> </div> <div class="carousel-item text-center"> <img src="images/client-02.jpg" alt="testimonial" class="center-block"> <div class="testimonial-caption"> <h2>Rauls Pole</h2> <h4><span>Marketing Manager, </span>Risco</h4> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip."</p> </div> </div> <div class="carousel-item text-center"> <img src="images/client-03.jpg" alt="testimonial" class="center-block"> <div class="testimonial-caption"> <h2>Jack</h2> <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip."</p> </div> </div> </div> </div> 

Answer 1

您忘记了将按钮包括在轮播中。 这些是下面示例末尾的a链接。 此外，您是否在项目中包括了jQuery和Bootstrap 4 JavsScripts？ 您可以在此处找到所有必要的行。

<div id="carousel-testimonial" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-testimonial" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-testimonial" data-slide-to="1"></li>
        <li data-target="#carousel-testimonial" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active text-center">
            <img src="images/client-01.jpg" alt="testimonial" class="center-block">
            <div class="testimonial-caption">
                <h2>Danial</h2>
                <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip."</p>
            </div>
        </div>
        <div class="carousel-item text-center">
            <img src="images/client-02.jpg" alt="testimonial" class="center-block">
            <div class="testimonial-caption">
                <h2>Rauls Pole</h2>
                <h4><span>Marketing Manager, </span>Risco</h4>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip."</p>
            </div>
        </div>
        <div class="carousel-item text-center">
            <img src="images/client-03.jpg" alt="testimonial" class="center-block">
            <div class="testimonial-caption">
                <h2>Jack</h2>
                <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip."</p>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carousel-testimonial" 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="#carousel-testimonial" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>