Bootstrap Carousel interval alteration

2
votes

I have a website which uses the bootstrap carousel. Here is my code:

<div id="slider">
  <div id="carousel-bounding-box">
     <div class="carousel slide" id="myCarousel">
         <div class="carousel-inner">
                <?php
    if ($images = get_field('images', $design_id)) {
    foreach ($images as $key => $image) {
        $active = $key == 0 ? 'active' : '';
        echo 'item" data-interval="1000">';
        echo '<img src="' . $image['image']['sizes']['large'] . '" />';
        echo '</div>';                        }
    }
?> 

         </div>
         <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>                                       
         </a>
         <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>                                       
          </a>                                
      </div>
  </div>
</div>

Here is my jQuery:

jQuery(document).ready(function($) {

    $('#myCarousel').carousel({
            interval: 1000
    });

    $('#carousel-text').html($('#slide-content-0').html());

    //Handles the carousel thumbnails
    $('[id^=carousel-selector-]').click( function(){
            var id_selector = $(this).attr("id");
            var id = id_selector.substr(id_selector.length -1);
            var id = parseInt(id);
            $('#myCarousel').carousel(id);
    });


    // When the carousel slides, auto update the text
    $('#myCarousel').on('slid.bs.carousel', function (e) {
             var id = $('.item.active').data('slide-number');
            $('#carousel-text').html($('#slide-content-'+id).html());
    });

      (function($) {
  fakewaffle.responsiveTabs(['xs', 'sm']);
});

});

I changed interval: 5000 to interval: 1000 because there was a delay when the slider would show items when the page loads. Since changing the interval to 1000 the sliders loads perfectly and quickly, however now the slide items need to be slowed down because they more too quickly between slides.

I think the issue is that the "active" state isn't given to a slide/image until after the interval. How can I add an active state to the above code for the 1st slide item automatically on page load rather than waiting until after the interval?

Any help would be greatly appreciated

1
javascriptphpjquerytwitter-bootstrap
you can not use echo inside echo, looks like a php error. – axel.michel
Thanks for pointing out, will correct :-) – user3615681
What about changing it back and using window load instead of document ready: 4loc.wordpress.com/2009/04/28/documentready-vs-windowload -- you could try it. – Christina
Oops: jsbin.com/xixuge/1.js – Christina
Basically see that item:first that's what you need and you need to make another one, just below for the :first of the li using similiar syntax. Give it a shot and when I get back I'll look – Christina

1 Answers

1
votes

Here is the code I used to fix the issue:

jQuery(document).ready(function($) {

    $('#myCarousel').carousel({
            interval: 3000
    });

     $('#myCarousel .item:first').addClass('active');
});