2016-12-26 6 views
1

したがって、JQueryを使用してカスタムカルーセルアイテムを追加したいとします。JQuery appendとBootstrapカルーセル

ここにscript.jsのコードがあります(これはファイル内の唯一のものです)。

<div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img src="1.jpg" alt=""> 
     <div class="carousel-caption"> 
     <h3>Item 1</h3> 
     <p>This is the first item</p> 
     </div> 
     </div> 

     <div class="item"> 
      <img src="5.jpg" alt=""> 
      <div class="carousel-caption"> 
       <h3>Item 2</h3> 
       <p>This is the second item</p> 
      </div> 
     </div> 
</div> 

しかし、私はカルーセル内の他の項目が表示されない:私はここに

<script type="text/javascript" src="script.js"></script> 
でスクリプトを呼び出す方法ですが、すでに2つの項目が含まれているカルーセルある

<script> 
$(document).ready(function(){ 
    for(i = 0; i < 5; i++) { 
     $('.carousel-inner').append('<div class="item"> <img src="1.jpg" alt=""> </div>'); 
    } 
});</script> 

これは機能しません。

$('.carousel-indicators').append('<li data-target="#myCarousel" data-slide-to="'+ i + '"></li>'); 

ちょうどscript.jsでこれを追加:誰もがここに苦労答えだ場合オーケー

+0

あなたはscript.jsを使用していると言ったので、.jsファイルでスクリプトのhtmlタグは何をしていますか? –

答えて

2

は、愚かな間違いは、私が作りました。問題はアイテムを作成したのですが、アイテムを表示することができませんでした。アイテムのインジケータも追加する必要があるためです。