javascript - Twitter Bootstrap Carousel 不会自动启动

标签 javascript jquery html css twitter-bootstrap

Bootstrap carousel 以前可以工作,但现在不工作了。我不知道我现在做错了什么。我在头上加载 jQuery,在页脚中加载 Javascript 外部文件和 bootstrap JS。

我希望在加载文档/加载页面时 Carousel 应该自动启动。我尝试了几种选择,但没有成功。

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});

$(function(){
$('.carousel').carousel({
      interval: 2000
    });
$('.carousel-control.right').trigger('click');
});

这是在页脚中加载的 JavaScript。

$("#homeCarousel .item:first").addClass("active");
$("#homeCarousel .carousel").carousel({interval: 100});

这是 HTML

<div id="homeCarousel" class="carousel slide visible-lg">
    <div id="CurrentDemandMeter">
        <div class="graph"><?php require_once("snippets/home_current_deman_graph.php"); ?></div>
        <div class="graphDeails">
            <div class="our_current_demand_label">Our current demand</div>
            <div class="what_is_this_label"><a class="what_is_this_link" href="#"></a></div>
        </div>
    </div>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <?php
        $i=0;
        $args = array('category_name' => 'homepage-carousel',);
        $loop = new WP_Query($args);
        while($loop->have_posts()): $loop->the_post();
            $link = get_field("learn_more_link", $post->ID);
            //$link = $meta_values[0];

             $args = array(
               'post_type' => 'attachment',
               'numberposts' => -1,
               'post_status' => null,
               'post_parent' => $post->ID
             );

              $attachments = get_posts( $args );
                 if ( $attachments ) {
                    foreach ( $attachments as $attachment ) {
                        $attachment = wp_get_attachment_url( $attachment->ID, 'full' );
    ?>
      <div class="item">
        <div class="fill"><img src="<?php echo $attachment; ?>" class="img-responsive"/></div>
        <div class="carousel-caption">
          <h1><?php echo substr(the_title($before = '', $after = '...', FALSE), 0, 30); ?></h1>
          <div class="excerpt"><?php echo the_excerpt(); ?></div>
          <a href="<?php echo $link; ?>" class="btn_learn_more"></a>
        </div>
      </div>
    <?php
              }
         }
        endwhile;
        wp_reset_query();
    ?>               
    </div>
</div>

最佳答案

我已经找到问题的答案。出于某种原因,"data-ride="carousel" 丢失了

<div id="homeCarousel" class="carousel slide visible-lg" data-ride="carousel">

只是一个简单的错误...干杯!

关于javascript - Twitter Bootstrap Carousel 不会自动启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20752754/

相关文章:

javascript - jquery - 从回调函数(在后请求中)返回值到其内部的函数中?

HTML 表格设置总列宽

javascript - 找到数组中 n 个最小数字的最快方法是什么?

jquery - 动态改变元素 li 的颜色不会改变 bullet point 的颜色

javascript - 多个脚本冲突

javascript - 基于选中/未选中复选框的文本框值

css - 我可以链接到单独文件中的 <head> 标记,以避免在我进行更改时必须更改它们吗?

javascript - 上传图像文件时输入类型 ="file"显示错误

javascript - chrome 和 firefox 之间的 window.innerWidth 不同?

javascript - 在javascript函数中使用局部变量获取表单元素