Why isn't this bootstrap carousel slider sliding?

问题

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

The jquery is 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);
}

回答1:

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.

EDIT

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

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

来源：https://stackoverflow.com/questions/47624287/why-isnt-this-bootstrap-carousel-slider-sliding

标签

javascript

jquery

css

twitter-bootstrap

carousel