【发布时间】：2018-06-02 04:02:24
【问题描述】：
大家好，我正在使用 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&controls=0&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 ********* -->
【问题讨论】：
-
如果我把上面的 sn-p 放到一个 BS4 模板上它会顺利滑动，所以我猜其他 css 会干扰这里的引导。
标签： javascript jquery carousel bootstrap-4