轮播加载失败

时间:2017-05-08 19:41:17

标签: javascript jquery html css twitter-bootstrap

我正在尝试从单独的html文件中调用bootstrap carousel滑块,但它不起作用。仅显示第一张图像而其他图像不会滑动。轮播滑块位于名为home.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>

我在我的index.html文件中使用div标签调用它:

<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();
  });
});

请帮忙!

1 个答案:

答案 0 :(得分:0)

由于您使用的是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();
    });

  });
});

&#13;
&#13;
$(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();
    });

  });
});
&#13;
<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>
&#13;
&#13;
&#13;