38125

Bootstrap carousel ignoring data-interval attribute

Question:

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?

Answer1:

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.

Recommend

  • 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?