8989

Bootstrap carousel, auto cycle then stop

Question:

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: <a href="http://twitter.github.com/bootstrap/javascript.html#carousel" rel="nofollow">http://twitter.github.com/bootstrap/javascript.html#carousel</a>

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

</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

</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 -->

Answer1:

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:

<a href="http://twitter.github.com/bootstrap/javascript.html#carousel" rel="nofollow">http://twitter.github.com/bootstrap/javascript.html#carousel</a>

Answer2:

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

Answer3:

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'); });

<a href="http://jsfiddle.net/zBU25/" rel="nofollow">jsfiddle</a>

Recommend

  • Global Temporary Tables - locking rows + Concurrency question
  • How can I reload a visual studio project thru a nuget powershell script
  • Need help doing simple rendering with Qt5 Qml + OpenGL
  • Google Maps API and DynamicMapsEngineLayer: Loop Over Features in the Map
  • What is this javascript code doing?
  • python - pandas - check if date exists in dataframe
  • Working of nutch server in distributed mode
  • Rearrange an array to be optimal in comparison to another array
  • Multiple Layouts Previews for Android in Eclipse
  • how do you read the ramda docs?
  • IE readonly textarea problem
  • Scrolling News Ticker Jquery - Issues
  • MySql - get days remaining
  • data.table replicate rows after join?
  • UITableView takes much longer to load when numberOfRows returns a large number
  • Visual studio 2015 keystroke with mouse button
  • countdown bar android example
  • Runtime.exec() gives Error: Could not find or load main class
  • How to pass nginx proxy url for socket
  • Trying to get the char code of ENTER key
  • How do I access an unhandled exception in an MVC Error view?
  • Google Custom Search with transparent background
  • Why value captured by reference in lambda is broken? [duplicate]
  • Update CALayer sublayers immediately
  • vba code to select only visible cells in specific column except heading
  • ExecuteAsync RestSharp to allow backgroundWorker CancellationPending c#
  • Proper way to use connect-multiparty with express.js?
  • Trying to get generic when generic is not available
  • embed rChart in Markdown
  • Change div Background jquery
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • To Get the radio button value in ruby on rails
  • java string with new operator and a literal