javascript - 带有图像指示器的 Bootstrap 轮播，例如缩略图不起作用

Question

我想用缩略图而不是指示器实现引导轮播。我发现this article

但这对我没有用。我只是复制并粘贴了它而没有任何更改，但是它不起作用。我不知道有什么问题，有人可以帮助我吗？

HTML：

<div class="carousel slide article-slide" id="article-photo-carousel">

<!-- Wrapper for slides -->
  <div class="carousel-inner cont-slider">

   <div class="item active">
     <img alt="" title="" src="http://placehold.it/600x400">
   </div>
  <div class="item">
     <img alt="" title="" src="http://placehold.it/600x400">
  </div>
  <div class="item">
    <img alt="" title="" src="http://placehold.it/600x400">
  </div>
  <div class="item">
    <img alt="" title="" src="http://placehold.it/600x400">
  </div>
</div>
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#article-photo-carousel">
       <img alt="" src="http://placehold.it/250x180">
    </li>
    <li class="" data-slide-to="1" data-target="#article-photo-carousel">
       <img alt="" src="http://placehold.it/250x180">
    </li>
    <li class="" data-slide-to="2" data-target="#article-photo-carousel">
       <img alt="" src="http://placehold.it/250x180">
    </li>
    <li class="" data-slide-to="3" data-target="#article-photo-carousel">
      <img alt="" src="http://placehold.it/250x180">
    </li>
    </ol>
   </div>

CSS：

/* Main carousel style */
 .carousel {
   width: 600px;
   }

   /* Indicators list style */
  .article-slide .carousel-indicators {
      bottom: 0;
      left: 0;
      margin-left: 5px;
      width: 100%;
     }
    /* Indicators list style */
 .article-slide .carousel-indicators li {
    border: medium none;
    border-radius: 0;
    float: left;
    height: 54px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 5px !important;
    margin-top: 0;
    width: 100px;
   }
  /* Indicators images style */
.article-slide .carousel-indicators img {
   border: 2px solid #FFFFFF;
   float: left;
   height: 54px;
   left: 0;
   width: 100px;
   }
  /* Indicators active image style */
  .article-slide .carousel-indicators .active img {
    border: 2px solid #428BCA;
    opacity: 0.7;
    }

JS：

// Stop carousel
 $('.carousel').carousel({
  interval: false
   });

演示：JSFiddle link

Answer 1

我创建了一个页面并添加了Libere Liberaries：


的jquery-1.10.2.js
bootstrap.min.js
bootstrap.min.css


而且工作还不错。

我想你忘了他们的自由。

我上传了，您可以下载：
Download Link