1
Ich habe ein einfaches Codepen mit eingerichtet, was ich dachte, sollte als ein Schieberegler funktionieren. Es enthält bootstrap.css, jquery.js und bootstrap.js. Ich kann nicht herausfinden, was fehlt, dass das js vom Rutschen stoppt.Warum gleitet dieser Bootstrap-Karussellschieber nicht?
Die bootstrap.css Datei ist bei https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css
Die jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js
ist Und die bootstrap.js ist bei 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);
}
irgendwelche Fehler in der Konsole? – DrNio
Es gibt einen Fehler. "index.js: 21 Uncaught ReferenceError: Popper ist nicht definiert bei index.js: 21 (anonym) @ index.js: 21" Nicht sicher, was das bedeutet. – asharpdesigner
Gibt es einen Grund, warum Sie nicht die neuesten Skripte von Bootstrap verwenden? Sie scheinen auch die Markierung des Schiebereglers geändert zu haben. Mit ihrem Beispiel-Markup und den neuesten Skripten funktioniert es: https://codepen.io/anon/pen/EbrzMZ –