Why isn't this bootstrap carousel slider sliding?

Question

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

There is one error. "index.js:21 Uncaught ReferenceError: Popper is not defined at index.js:21 (anonymous) @ index.js:21" Not sure what that means. — asharpdesigner
Is there a reason you're not using the latest scripts from Bootstrap? You also seem to have altered the markup of the slider. Using their example markup and the latest scripts, it works: codepen.io/anon/pen/EbrzMZ — tao
What do you mean? I'm using the top result in codepen when I search for bootstrap.js and popper.js. That comes up with cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0-next/esm/… which doesn't work. — asharpdesigner
It's not some random codepen. You can search codepen itself when adding an external script. There are only two results, the one I used and one below it for react. Their website also uses the same version 1.13.0. Apparently you must use the "umd" version instead of their current esm version or it breaks. How the hell is anyone possibly supposed to know that? — asharpdesigner

Muhammad Omer Aslam Muhammad Omer Aslam · Accepted Answer · 2017-12-03T23:10:23

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

Why isn't this bootstrap carousel slider sliding?

1 Answers