CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Navneil Naicker
Navneil Naicker

Reputation: 3691

Twitter Bootstrap Carousel doesn't auto-start

Bootstrap carousel used to work before but it's no longer working. I can't figure it out what I have done wrong now. I' am loading jQuery on my head and Javascript external files and bootstrap JS in the footer.

I want when the document is loaded / page is loaded the Carousel should auto start. I have tried few options but no luck.

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

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

This is the JavaScript which is loaded in the footer.

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

This the 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>

Upvotes: 0

Views: 1338

Answers (1)

Navneil Naicker
Navneil Naicker

Reputation: 3691

I' ve managed to find the Answer for my Question. For some reason "data-ride="carousel" was missing from

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

Just a simple mistake...Cheers!

Upvotes: 2

Related Questions