javascript - Bootstrap 4 轮播幻灯片没有动画

Question

大家好，我正在使用 Boostrap 4 beta-2，我正在尝试让轮播使用幻灯片动画。我有 class="item" 到 "carousel-item" 类，让它在幻灯片之间切换(这也删除了 'offsetWidth undefined' 控制台错误。但是，动画仍然无法正常工作，只是在幻灯片之间跳转。

谁能指出我正确的方向？我不确定问题出在哪里。 (CSS/JS)。控制台没有错误。

<!--     *********     HEADER 3      *********      -->
<div class="header-3">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item carousel-item active">
                <div class="page-header header-filter">
                    <div class="page-header-image" style=""></div>
                    <div class="content-center">
                        <div class="container text-left">
                            <div class="content-center">
                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="iframe-container">
                                            <iframe height="250" src="https://www.youtube.com/embed/rmfmdKOLzVI?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                                        </div>
                                    </div>
                                    <div class="col-md-6 ml-auto mr-auto text-right">
                                        <h1 class="title">On the run tour.</h1>
                                        <h4 class="description ">On the Run Tour: Beyoncé and Jay Z is a 2014 concert special which documents the September 12 and 13, 2014, shows of American singers' Beyoncé and Jay-Z joint co-headlining venture On the Run Tour.</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item carousel-item">
                <div class="page-header header-filter">
                    <div class="page-header-image" style=""></div>
                    <div class="content-center">
                        <div class="container">
                            <div class="content-center">
                                <div class="row">
                                    <div class="col-md-8 ml-auto mr-auto text-center">
                                        <h1 class="title">Island of legends.</h1>
                                        <h4 class="description ">The islands of Malta and Gozo are brilliant for a family holiday, packed with fun places to visit whatever your children’s ages. The islands’ small size means everywhere is within easy reach.</h4>
                                        <br />
                                        <h5>Connect with us on:</h5>
                                        <div class="buttons">
                                            <a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
                                                <i class="fa fa-twitter"></i>
                                            </a>
                                            <a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
                                                <i class="fa fa-facebook-square"></i>
                                            </a>
                                            <a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round mt-2">
                                                <i class="fa fa-google-plus"></i>
                                            </a>
                                            <a href="#pablo" class="btn btn-icon btn-neutral btn-danger btn-round  mt-2">
                                                <i class="fa fa-instagram"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item carousel-item">
                <div class="page-header header-filter">
                    <div class="page-header-image" style=""></div>
                    <div class="content-center">
                        <div class="container">
                            <div class="content-center">
                                <div class="row">
                                    <div class="col-md-6 text-left">
                                        <h1 class="title">Arctic Sea ice.</h1>
                                        <h4 class="description ">According to the National Oceanic and Atmospheric Administration, Ted Scambos, NSIDC lead scientist, puts the potentially record low maximum sea ice extent this year down to low ice extent in the Pacific and a late drop in ice extent in the Barents Sea.</h4>
                                        <br />
                                        <div class="buttons">
                                            <a href="#pablo" class="btn btn-neutral btn-primary btn-lg mr-1">
                                                <i class="now-ui-icons files_single-copy-04"></i> Read More..
                                            </a>
                                            <a href="#pablo" class="btn btn-primary btn-lg">
                                                <i class="now-ui-icons arrows-1_share-66"></i> Subscribe
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <i class="now-ui-icons arrows-1_minimal-left"></i>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <i class="now-ui-icons arrows-1_minimal-right"></i>
        </a>
    </div>
</div>
<!--     *********    END HEADER 3      *********      -->

Answer 1

改变这个

<div id="carouselExampleIndicators" class="container" data-ride="carousel">

对此

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

Carousel w/ Indicators documentation