diff --git a/javascript.html b/javascript.html index 4d3d08800b3e9824e6db2253ea01823c39b3337a..4c6f930b710cb398ca99eb8932cd74340a2d4fc6 100644 --- a/javascript.html +++ b/javascript.html @@ -1757,7 +1757,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { <h3>Via data attributes</h3> <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p> <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load.</p> - + <p>The <code>data-random="true"</code> attribute has the carousel choose a random starting item from the set of items.</p> <h3>Via JavaScript</h3> <p>Call carousel manually with:</p> {% highlight js %} diff --git a/js/carousel.js b/js/carousel.js index d8c4c243caa153204bfa6447c8731bec63422dda..b2a8e011fe81a4f823ec3e7d9c3551f295fa0395 100644 --- a/js/carousel.js +++ b/js/carousel.js @@ -173,6 +173,13 @@ if (typeof option == 'number') data.to(option) else if (action) data[action]() else if (options.interval) data.pause().cycle() + + if (options.random) { + $this.find('.item.active').removeClass('active') + var $items = $this.find('.item') + var pos = Math.floor(Math.random() * $items.length) + $($items[pos]).addClass('active') + } }) }