轮播不适用于bootstrap v4

时间:2017-05-22 17:48:16

标签: html css twitter-bootstrap

我正在开发一个网络项目并面临轮播问题,它不会通过点击甚至自动转移到下一个图像。以下是我的代码:

(a|b)ll

1 个答案:

答案 0 :(得分:1)

您忘了将按钮包含在旋转木马中。这些是以下示例末尾的a-links。此外,您是否在项目中包含了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>