为什么这个自举旋转木马滑块没有滑动?

我有一个简单的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

 

  

Create and share your whatever

Make it easy for you to do whatever this thing does.

Create Project
View Demo

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); } 

你正在使用bootstrap4所需的popper.js添加它,它将开始工作,确保你在jquery之后和bootstrap库之前添加它。

编辑

看看Codepen重要的事情,包括popper.js库,如果你包括一个CDN版本,就是使用umd (https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.js)我在链接中提供的版本所有其他版本都有某种问题。

EDIT2

Bootstrap网站本身提到了以下内容 – “如果您正在使用我们编译的JavaScript,请不要忘记在它之前包含jQuery和Popper.js的CDN版本。” 。 接下来是jQuery和Popper.js的相关链接。 这是链接