Bootstrap 4旋转木马幻灯片没有动画

时间:2017-12-19 16:55:38

标签: javascript jquery carousel bootstrap-4

大家好我正在使用Boostrap 4 beta-2并试图让旋转木马使用幻灯片动画。我class="item""carousel-item"让它在幻灯片之间切换(这也删除了'offsetWidth undefined'控制台错误。但是,动画仍然不起作用,只是在幻灯片之间跳转。 / p>

有人能指出我正确的方向吗?我不确定问题出在哪里。 (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      *********      -->

2 个答案:

答案 0 :(得分:1)

更改此

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

到这个

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

Carousel w/ Indicators documentation

答案 1 :(得分:0)

检查项目中是否只有一个.css文件。如果您从互联网上下载了一些主题,则可能是那些样式重写了原始的引导程序类,并影响了您的轮播。