为什么要使用这个滑块呢？

Question

我有这个样本：

link

​

$(document).ready(function() {
  $('.carousel').carousel({
    interval: 7000
  });
});

.carousel {
  z-index: -99;
}
/* keeps this behind all content */

.carousel .item {
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
.carousel .one {
  background: url(assets/img/slide3blur.jpg);
  background-size: cover;
  -moz-background-size: cover;
}
.carousel .two {
  background: url(assets/img/slide2blur.jpg);
  background-size: cover;
  -moz-background-size: cover;
}
.carousel .three {
  background: url(assets/img/slide1blur.jpg);
  background-size: cover;
  -moz-background-size: cover;
}
.carousel .active.left {
  left: 0;
  opacity: 0;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myCarousel" class="carousel container slide">
  <div class="carousel-inner">
    <div class="active item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
  </div>
</div>

​

不幸的是，这个旋转木马不能工作。我收到此错误

Uncaught TypeError: $(...).carousel is not a function

你能帮我修复这个错误吗？提前谢谢你

Answer 1

你需要把jQuery.js放在bootstrap.js之前

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

应该放在前面：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

只需单击设置按钮(左侧为JS)：

​

​

然后更改“includes”的顺序：

​

​

请注意，您也应该验证jpg文件，但carusel问题已经解决。

Answer 2

您没有包含旋转木马插件。请将此行添加到您的head标签中

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这是引导转盘的三行代码，它将正常运行。