为什么要使用这个滑块？

Question

我有这个样本：

link

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

不幸的是这个旋转木马不起作用。我收到此错误

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

你可以帮我解决这个错误吗？ 提前谢谢

Answer 1

你需要在bootstrap.js之前放置jQuery.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

您不包含carousel插件。请将此行添加到您的头标记

  <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>

这些是用于自举旋转木马的三条线，它将正常运行。