Databases
StackOverflow2013
Postsdbo
POBootstrap carousel is auto-sliding even though the slide class is removed
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap carousel is auto-sliding even though the slide class is removed
    text
    copied!<p>I have two different carousels on my site; 1 that auto-slides, and 1 that doesn't. For the one that doesn't I'm using custom js to create pagination.</p> <p>The problem is, that on the second one mentioned above, I removed the "slide" class but it's still auto-sliding. </p> <p>Since I have the other carousel that does need to auto-slide, I can't change the bootstrap.js interval to false. (I also don't want to include a separate script on the page with the one I need to fix, because it's part of a site template and that gets messy).</p> <p>Here is my jsFiddle with all the code. <a href="http://jsfiddle.net/cindyg/UNKeL/4/" rel="nofollow noreferrer">http://jsfiddle.net/cindyg/UNKeL/4/</a></p> <p>You can see that the containing div does not have the "slide" class:</p> <pre><code>&lt;div id="myCarousel" class="carousel"&gt; </code></pre> <p>I have seen people post about the opposite problem, such as <a href="https://stackoverflow.com/questions/11233449/bootstrap-carousel-not-automatically-sliding">Bootstrap Carousel Not Automatically Sliding</a> and have applied some of the techniques mentioned, to no avail.</p> <p>Here is the custom js I added to get the pagination:</p> <pre><code>$(document).ready( function() { $('#myCarousel').each( function() { var html = '&lt;div class="carousel-nav " data-target="' + $(this).attr('id') + '"&gt;&lt;ul&gt;'; for(var i = 0; i &lt; $(this).find('.item').size(); i ++) { html += '&lt;li&gt;&lt;a'; if(i == 0) { html += ' class="active"'; } var item = $(this).find('.item').get(i); html += ' href="#"&gt;&amp;nbsp;' + $(item).attr('data-title') + '&lt;/a&gt;&lt;/li&gt;'; } html += '&lt;/ul&gt;&lt;/li&gt;'; $(this).after(html); $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide(); } ).bind('slid', function(e) { var nav = $('.carousel-nav[data-target="' + $(this).attr('id') + '"] ul'); var index = $(this).find('.item.active').index(); var item = nav.find('li').get(index); nav.find('li a.active').removeClass('active'); $(item).find('a').addClass('active'); if(index == 0) { $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut(); } else { $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn(); } if(index == nav.find('li').size() - 1) { $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut(); } else { $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn(); } } ); $('.carousel-nav a').bind('click', function(e) { var index = $(this).parent().index(); var carousel = $('#' + $(this).closest('.carousel-nav').attr('data-target')); carousel.carousel(index); e.preventDefault(); } ); $('.carousel').carousel('cycle'); // Start the animation automatically }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload