帶有圖像指示器的Bootstrap輪播，就像縮略圖不工作一樣

Question

我想實現一個帶縮略圖而不是指標的bootstrap輪播。我找到了這篇文章

但這對我不起作用。 我只是復制並粘貼它，沒有任何更改，但它不起作用。 我不知道有什么問題，任何人都可以幫助我嗎？

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

Answer 1

我創建了一個Page和Add Belowe Libraries：

• jQuery的1.10.2.js
• bootstrap.min.js
• bootstrap.min.css

它的工作很好。

我想你忘記了他們的自由。

我上傳了你可以下載： 下載鏈接