1

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 -->
matt
  • 777
  • 2
  • 12
  • 25
  • 1
    Sorry, I'm not quite clear on your desired behaviour. Are you saying you want the carousel to stop on the second image or that that is currently happening and you want to fix it? – cms_mgr Feb 07 '13 at 12:45
  • I'd like it to show the first image for say 500ms, then move to the second image and stop. Does that clarify? I'll edit the Question too – matt Feb 07 '13 at 13:00
  • @matt The interval option is clearly meant for cycling. Have you thought about a simple `setTimeout` ? – Sherbrow Feb 07 '13 at 13:34
  • thats kind of what i wanted. Set interval to "false" so it doesnt cycle, then moved to slide ID=1 with a 500ms delay. How would I use a setTimeout? Sorry - really really limited jquery knowledge – matt Feb 07 '13 at 13:41

3 Answers3

1

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

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
0

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
Umer Anwar
  • 1
0

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

ramiz4
  • 81
  • 3