Question

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

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

Answer 1

bootstrap4您需要jquery添加它，它将开始工作，请确保在bootstrap之后和popper.js库之前添加它。

修改

如果您要包含CDN版本，请参阅popper.js包括umd库在内的重要内容，使用我在链接中提供的(https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.js) df<- data.frame(date= c(rep("10-29-16", 3), rep("11-14-16", 2), "12-29-16","10-2-17","9-2-17"), loc= c(rep("A", 3), rep("B", 2),"A","PlotA","PlotB"), obs_network= c(rep("NA", 3), rep("NA", 2),"NA","PlotA","PlotB"))版本全部其他版本在某种程度上遇到了一些问题。

<强> EDIT2

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

为什么这个引导旋转木马滑块没有滑动？

1 个答案: