javascript - 代码在 jsfiddle 中不起作用

Question

我的代码在 jsfiddle 中似乎不起作用。当我单击左侧控件或右侧控件时，没有任何反应。我已将外部脚本(bootstrap 和 jQuery)和样式表(bootstrap)添加到外部资源。我还需要在 html 编辑器中引用脚本吗？ fiddle

HTML

<div class="carousel fade" id="carousel">
    <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#carousel"></li>
        <li data-slide-to="1" data-target="#carousel"></li>
        <li data-slide-to="2" data-target="#carousel"></li>
    </ol>
    <div class="carousel-inner">
        <div class="active item">
                <div class="container">
                  <h3>Header 1</h3>
                    <h1 class="col-md-9">Some text </h1>
                </div><img class="main-image" src="data:image/jpeg;base64,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">
        </div>
        <div class="item">
                <div class="container">
                    <h3>Header 2</h3>
                    <h1 class="col-md-9">Some text </h1> <a class="q-arrow-link text-white various fancybox.iframe" href="https://www.youtube.com/embed/JeZQ7f58TsM?autoplay=1"> watch video 1 </a>
                </div><img class="main-image" src="data:image/jpeg;base64,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">
        </div>
        <div class="item">
                <div class="container">
                    <h3>Header 3</h3>
                    <h1 class="col-md-9">Some text </h1> <a class="q-arrow-link text-white various fancybox.iframe" href="https://www.youtube.com/embed/-NSvbGxzpKk?autoplay=1"> watch video 2 </a>
                </div><img class="main-image" src="data:image/jpeg;base64,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">
        </div>
        </div>
    </div><a class="carousel-control left" data-slide="prev" href="#carousel"></a> <a class="carousel-control right" data-slide="next" href="#carousel"></a>

CSS

.carousel.fade {
  opacity: 5;
}
.carousel.fade .item {
  transition: opacity ease-in 1s;
  left: 0;
  opacity: 0; /* hide all slides */
  top: 0;
  position: absolute;
  width: 100%;
  display: block;
}

.carousel.fade .item h3.text-white.title {
  transition: opacity ease-in 3s
  }


.carousel.fade .item:first-child {
  top: auto;
  opacity: 0; /* show first slide */
  position: relative;

}

.carousel.fade .item.active {
  opacity: 1;

}

Answer 1

在您的 jsfiddle 中，bootstrap.min.js 包含在它所依赖的 jquery 之前。如果您更改顺序以便 jquery 先执行，则一切正常:http://jsfiddle.net/d55t7hfa/