カルーセルの読み込みに失敗しました

Question

別のhtmlファイルからブートストラップカルーセルスライダを呼び出そうとしていますが、うまくいきません。最初の画像のみが表示され、他の画像はスライドしません。

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="images/insole_01.jpg" alt="Chania"> 
    </div> 

    <div class="item"> 
     <img src="images/insole_02.jpg" alt="Chania"> 
    </div> 

    <div class="item"> 
     <img src="images/insole_03.jpg" alt="Flower"> 
    </div> 

    <div class="item"> 
     <img src="images/insole_04.jpg" alt="Flower"> 
    </div> 
    </div> 
</div> 

私はdivタグと私のindex.htmlファイルでそれを呼んでいる：カルーセルスライダーはhome.htmlというファイルにある

<div class="products"></div> 

そしてこれは、カルーセルのためのJavascriptコードです：

$('.carousel').carousel({ 
    interval: 3500 
}); 
$(document).ready(function() { 
    $('div.products').load('products/home.html'); 
    $('.dropdown-menu>li').find('a').on('click', function(e){ 
    var links = $(this).attr('href'); 
    $('div.products').load(links).hide().fadeIn('300'); 
    e.preventDefault(); 
    }); 
}); 

助けてください！

Answer 1

jQuery load()を使用しているので、Callback Functionを使用する必要があります.HTMLが読み込まれた後でコードを実行してください。もっとここに

（また、あなたのパスが正しいことを確認してください）

読む：http://api.jquery.com/load/

$(document).ready(function() { 

    $("div.products").load("products/home.html", function() { 

    $('.carousel').carousel({ 
     interval: 500 
    }); 

    $('div.products').load('products/home.html'); 
    $('.dropdown-menu>li').find('a').on('click', function(e) { 
     var links = $(this).attr('href'); 
     $('div.products').load(links).hide().fadeIn('300'); 
     e.preventDefault(); 
    }); 

    }); 
}); 

$(document).ready(function() { 
 

 
    $("div.products").load("products/home.html", function() { 
 

 
    $('.carousel').carousel({ 
 
     interval: 500 
 
    }); 
 

 
    $('div.products').load('products/home.html'); 
 
    $('.dropdown-menu>li').find('a').on('click', function(e) { 
 
     var links = $(this).attr('href'); 
 
     $('div.products').load(links).hide().fadeIn('300'); 
 
     e.preventDefault(); 
 
    }); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 

 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="images/insole_01.jpg" alt="Chania"> 
 
    </div> 
 

 
    <div class="item"> 
 
     <img src="images/insole_02.jpg" alt="Chania"> 
 
    </div> 
 

 
    <div class="item"> 
 
     <img src="images/insole_03.jpg" alt="Flower"> 
 
    </div> 
 

 
    <div class="item"> 
 
     <img src="images/insole_04.jpg" alt="Flower"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="products"> 
 

 
</div>