为什么这个bootstrap旋转木马滑块没有滑动？
我有一个简单的codepen设置，我认为应该作为一个滑块工作。它包括bootstrap.css、jquery.js和bootstrap.js。我不知道缺少什么是阻止js滑动。
HTML
<body>
<div class="call-to-action">
<h1>Create and share your whatever</h1>
<h2>Make it easy for you to do whatever this thing does.</h2>
<a class="big-button" href="" title="">Create Project</a>
<div class="clear"></div>
<a class="view-demo" href="" title="">View Demo</a>
</div>
<div id="carousel" 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="carousel-item active" style="background-image: url('https://images.unsplash.com/photo-1507915600431-5292809c5ab7?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')">
</div>
<div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1511022406504-605119708377?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
CSS
.carousel-inner {
width: 100%;
display: inline-block;
position: relative;
}
.carousel-inner {
padding-top: 43.25%;
display: block;
content: "";
}
.carousel-item {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: skyblue;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.call-to-action {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 60%;
z-index: 9;
margin-top: 20px;
text-align: center;
}
.call-to-action h1 {
font-size: 52px;
font-weight: 700;
margin-bottom: 23px;
}
.call-to-action h2 {
font-size: 26px;
font-weight: 300;
}
a.big-button {
color: #fff;
font-size: 19px;
font-weight: 700;
text-transform: uppercase;
background: #eb7a00;
background: rgba(235, 122, 0, 0.75);
padding: 28px 35px;
border-radius: 3px;
margin-top: 80px;
margin-bottom: 0;
display: inline-block;
}
a.big-button:hover {
text-decoration: none;
background: rgba(235, 122, 0, 0.9);
}
a.view-demo {
color: #000;
font-size: 21px;
font-weight: 700;
display: inline-block;
margin-top: 35px;
}
a.view-demo:hover {
text-decoration: none;
color: #333;
}
.carousel-indicators .active {
background: #000;
}
.carousel-indicators li {
background: rgba(0, 0, 0, 0.5);
}
共有1个答案
您正在错过popper.js，这是bootstrap4添加它，它将开始工作，请确保在jQuery之后和bootstrap库之前添加它。
编辑
请参阅Codepen如果包含CDN版本，包括popper.js库的重要内容是使用umd(https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.js)版本。
编辑2
Bootstrap网站本身提到了以下内容--“如果您使用的是我们编译的JavaScript，请不要忘记在它之前包含jQuery和popper.js的CDN版本。”之后是jQuery和popper.js的相关链接。以下是链接
-
所以基本上我想跟滑头做点这样的事...我想有正常的幻灯片，但事情是，是，我想有行动呼吁（按钮）在他们。这通常很容易将按钮与幻灯片一起放入，但有一个溢出：旋转式播放器上隐藏的样式无法取下，否则其他幻灯片会显示出来。我想知道如何才能做到这一点（按钮稍微往外走而不被切断）。 编辑：添加边框到旋转木马，这是真正的问题，我有...维护边框并使底部与边框重叠
-
我想把velocity.js效果结合到Slick Carousel插件中。 slick：http://kenwheeler.github.io/slick/velocity：http://julian.com/research/velocity/ 这很管用,但有一个奇怪的副作用： 这是我现在得到的密码。所以我做了一个效果序列，它是用钩子beforeChange触发的。 当我转到下一张幻灯片时，它起
-
我有一些问题添加滑块lightbox到滑块，它没有打开弹出窗口。在remove itemSelector img之后，它打开弹出窗口，但是src未定义。有什么提示吗？ JS： HTML
-
我穿着magento 2.2.2和使用Unero主题，我正在开发magento前端。当我在内容部分添加OWL旋转木马滑块时，它是不可见的？
-
我有多个猫头鹰旋转木马设置在我的主页。我有第一个（关于免费送货的）设置为滑速10000。因为你可以看到所有的幻灯片都以相同的速度变化。 这有什么不起作用的原因吗？我做错什么了吗？
-
我想让用户能够滑动轮播如果在一个ipad的肖像模式，而不是滑动如果在横向模式。 我遵循这个例子是为了改变基于肖像/风景的旋转木马的设置，但它只在某种程度上起作用： 下面的代码适用于页面加载，但不适用于方向更改。 我想我必须重新初始化旋转木马，但我不知道如何。我试着，并用新的设置重新初始化它，但似乎不起作用。