为什么此自举轮播滑块滑动了? [英] Why isn't this bootstrap carousel slider sliding?
问题描述
我有一个简单的Codepen，设置了我认为可以用作滑块的代码.它包括bootstrap.css，jquery.js和bootstrap.js.我无法弄清楚是什么阻止了js的滑动.
I have a simple codepen set up with what I thought should work as a slider. It includes bootstrap.css, jquery.js, and bootstrap.js. I can't figure out what is missing that is stopping the js from sliding.
The bootstrap.css file is at 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
And the bootstrap.js is at 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);
}
推荐答案
You are mising popper.js that is required for bootstrap4 add it and it will start working, make sure you add it after jquery and before bootstrap library.
编辑
请参见 Codepen ，其中重要的内容包括popper.js库，如果您要添加的内容CDN版本是要使用我在链接中提供的所有其他版本都出现问题的umd (https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.js)版本.
see the Codepen the important thing including the popper.js library if you are including a CDN version, is to use umd (https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.js) version that i provided in the link all other versions are having some problem somehow.
EDIT2
Bootstrap网站本身提到以下内容-如果您使用的是我们编译的JavaScript，请不要忘记在其之前包含CDN版本的jQuery和Popper.js." .然后是指向jQuery和Popper.js的相关链接.这是链接
The Bootstrap website itself mentions the following- "If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.". And it is followed by the relevant links to the jQuery and Popper.js. Here is the link
这篇关于为什么此自举轮播滑块滑动了?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
