【发布时间】：2018-05-17 09:11:12
【问题描述】：
我有一个简单的 codepen 设置，我认为应该用作滑块。它包括 bootstrap.css、jquery.js 和 bootstrap.js。我无法弄清楚阻止 js 滑动的原因是什么。
bootstrap.css 文件位于https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css
jquery 是https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js
bootstrap.js 位于https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.js
https://codepen.io/sharpdesigner/pen/mqvYMp
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);
}
【问题讨论】：
-
控制台有什么错误吗？
-
有一个错误。 "index.js:21 Uncaught ReferenceError: Popper is not defined at index.js:21 (anonymous) @ index.js:21" 不知道这意味着什么。
-
您没有使用来自 Bootstrap 的最新脚本是否有原因？您似乎还更改了滑块的标记。使用他们的示例标记和最新的脚本，它可以工作：codepen.io/anon/pen/EbrzMZ
-
什么意思？当我搜索 bootstrap.js 和 popper.js 时，我使用的是 codepen 中的顶部结果。这会出现 cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0-next/esm/… 不起作用。
-
这不是一些随机的代码笔。添加外部脚本时，您可以搜索 codepen 本身。只有两个结果，一个是我用的，一个是在它下面的，用于反应。他们的网站也使用相同的版本 1.13.0。显然，您必须使用“umd”版本而不是他们当前的 esm 版本，否则它会中断。怎么会有人知道这一点？
标签： javascript jquery css twitter-bootstrap carousel