Databases
StackOverflow2013
Postsdbo
POBootstrap carousel slides out of order
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap carousel slides out of order
    primarykey
    data
    text
    <p>Strange problem here, and I can't find anyone else who's encountered it. </p> <p>My carousel runs fine in Chrome, Safari and Firefox (mac and pc) but in IE7 and 8, the slides appear completely out of order after the first slide appears on page load. The first slide is always correct. If I start using the previous/next buttons, they will cycle through in the correct order.</p> <p>BUT, I've had 2 other people test in Chrome, FF and Safari, and they are sometimes out of order.</p> <p>bootstrap-carousel.js is untouched from the original (freshly downloaded).</p> <p>I do have some custom js going on for some other carousels on my site that use pagination. this one doesn't use it though. The custom code does not refer to the div id of the problem carousel. However when I remove the link on the page to the custom js, the problem goes away, so obviously it's related but I can't figure out why.</p> <p>Here is the HTML:</p> <pre><code>&lt;div id="myCarousel" class="carousel"&gt; &lt;div class="carousel-inner"&gt; &lt;div class="item active"&gt; &lt;img src="images/home-slide-girl.jpg" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="images/home-slide-woman.jpg" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="images/home-slide-mom.jpg" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="images/home-slide-choco.jpg" alt=""&gt; &lt;/div&gt; &lt;/div&gt; &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt; &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt; &lt;/div&gt;&lt;!-- end myCarousel --&gt; </code></pre> <p>here is the custom js that the other carousels use for pagination:</p> <pre><code>$(document).ready( function() { $('#myCarousel2, #myCarousel3').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> <p>);</p> <p>Any ideas? Thanks guys.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UScindyg
    1. UScindyg
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COWhat do you mean 'out of sync' ? And it would be easier for you and for everybody if you could reproduce the bug with minimal code on [JSFiddle](http://jsfiddle.net) for example.
      singulars
      1. POBootstrap carousel slides out of order
      1. USSherbrow
    2. COSorry I meant to say out of order. They don't go in the order they are coded in the UL. And, I will do that, thanks.
      singulars
      1. POBootstrap carousel slides out of order
      1. UScindyg
    3. COEven for 'out of order', you should look for a pattern, it certainly isn't random. About that, check that the `$('.carousel-nav a')` elements don't get binded several times for the sliding (by you, or by the default `.carousel-control` class).
      singulars
      1. POBootstrap carousel slides out of order
      1. USSherbrow
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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