html - 轮播不适用于 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？您会找到所有必要的行 here .

<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>