Bootstrap carousel ignoring data-interval attribute


Here's my markup:

<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-pause="hover"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div style="height:200px;">Slide 1</div> <div class="carousel-caption"> ... </div> </div> <div class="item"> <div style="height:200px;">Slide 2</div> <div class="carousel-caption"> ... </div> </div> <div class="item "> <div style="height:200px;">Slide 3</div> <div class="carousel-caption"> ... </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>

I am using bootstrap v3.0.3, and yet the carousel still starts scrolling after page is loaded. I have also tried including:

$(function () { $(".carousel").carousel({ interval: false }); });

I've done this with and without the data-interval attribute, all to no avail. The carousel automatically starts scrolling after page is loaded. I have seen other questions about this but they were all referring to older version and implied it has been fixed by now.

Any ideas please?


Your carousel markup is correct for 3.0.3 (<a href="http://bootply.com/103352" rel="nofollow">http://bootply.com/103352</a>)

Make sure there is not other JavaScript code or other carousels on the same page.


  • Bootstrap Video Carousel Play button/ left & right indicators not appearing
  • Multiple ViewPagers in on Activity
  • Bootstrap Carousel showing all images at once when i use ng-repeat
  • Change scroll direction at Anchor point
  • addEventHandler() in a loop has unexpected results
  • AngularJS class ng-scope is not being added
  • Error: Cannot determine the module for class OverlayPortal in --prod
  • Carousel bootstrap doesn't work
  • ReplaceWith carousel-inner with new items
  • Can't use openlayers-3 with webpack
  • jQuery, Calling multiple animations in a row on click
  • reduce/reduce conflicts using ocamlyacc
  • Table striping rows in CSS Grid
  • C++ cout and enum representations
  • ZipList with Scalaz
  • abstracting over a collection
  • How can I tell a form not to dispose a particular control when it closes?
  • WPF version of .ScaleControl?
  • Overlapping controls in Windows XP
  • IE7 and TinyMCE with Plone
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • Custom Tabgroup Appcelerator
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Disable Enter in editText android
  • Using jQuery closest() method with class selector
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to check if every primary key value is being referenced as foreign key in another table
  • Shallow update not allowed (git > 1.9)
  • Where to put my custom functions in Wordpress?
  • jquery mobile loadPage not working
  • Jquery - Jquery Wysiwyg return html as a string
  • How to include full .NET prerequisite for Wix Burn installer
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • python regex in pyparsing
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Qt: Run a script BEFORE make
  • Observable and ngFor in Angular 2
  • How to push additional view controllers onto NavigationController but keep the TabBar?