CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
matt
matt

Reputation: 787

Bootstrap carousel, auto cycle then stop

I'm using twitter bootstrap and the carousel feature. The markup is shown below.

I'm trying to achieve something where on page load, 1. the carousel starts on the first slide and holds there (lets say 500ms). 2. Then it moves to slide 2 and stops forever.

There are only 2 slides and the user could move between them with the arrows, but this shouldn't trigger constant cycling of slides. (this is not too important if difficult).

I've tried changing the carousel controls as per but I can't quite figure it out: http://twitter.github.com/bootstrap/javascript.html#carousel

From:

<script type="text/javascript">
$('.carousel').carousel({
        interval: 3000
})
</script>

to: 

<script type="text/javascript">
                  $('.carousel').carousel({
                  interval: false
                  }).carousel(1).delay('500');
</script>

when I do the latter option, the carousel rolls continuously once I press an arrow, but not at all normally.

I've included my carousel markup. Hope this helps. Anyone with a bigger brain than my little pea have any ideas or pointers?

<div id="myCarousel" class="carousel slide">
                  <div class="carousel-inner">
                  <div class="item active">
                        <a href="#" class="featurette">
                        <img class="featurette-image pull-right" width="200" height="200" src="en_200x200.png">
                        <h2 class="featurette-heading">Heading 1</h2><p class="lead muted">Strapline 1</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#" class="featurette">
                        <img class="featurette-image pull-right" width="200" height="200" src="cloud.png">
                        <h2 class="featurette-heading">Heading 2</h2>
                        <p class="lead muted">Strapline 2</p>
                        </a>
                    </div>


                  </div>
                  <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                  <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
                  <hr>


                </div><!-- /.carousel -->

Upvotes: 1

Views: 5872

Answers (3)

ramiz4
ramiz4

Reputation: 81

Twitter Bootstrap v3.0.3

// initialize carousel
$('.carousel.slide').carousel();

// stop sliding the carousel after clicking next/prev button
$(document).on('slide.bs.carousel', '.carousel.slide', function () {
    $(this).carousel('pause');
});

jsfiddle

Upvotes: 0

Umer Anwar
Umer Anwar

Reputation: 1

I Got the solution of this :P open boostrap.js goto line number 275 looks like

this.options.pause == 'hover' && this.$element
  .on('mouseenter', $.proxy(this.pause, this))
  .on('mouseleave', $.proxy(this.cycle, this))

now set it to true and carousal will be paused

this.options.pause ==true

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

You could try this, not 100% sure it'll work but worth a go.

This event should fire after the first slide has 'slid' and should then 'pause' the carousel.

$('#myCarousel').bind('slid', function() {
    $(this).carousel('pause');
});​

Cobbled together from the information here:

http://twitter.github.com/bootstrap/javascript.html#carousel

Upvotes: 1

Related Questions