Twitter Bootstrap Carousel不会自动启动

时间:2013-12-23 23:28:43

标签: 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>

1 个答案:

答案 0 :(得分:2)

我设法找到了我的问题的答案。出于某种原因

缺少“data-ride =”carousel“
<div id="homeCarousel" class="carousel slide visible-lg" data-ride="carousel">

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