JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container">
This will loop/wrap.
<div id="carousel-thing" class="carousel slide">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://i.chzbgr.com/maxW500/7746110720/hD4C072A6/" />
<div class="carousel-caption">one</div>
</div>
<div class="item">
<img src="https://i.chzbgr.com/maxW500/7746110720/hD4C072A6/" />
<div class="carousel-caption">two</div>
</div>
<div class="item">
<img src="https://i.chzbgr.com/maxW500/7746110720/hD4C072A6/" />
<div class="carousel-caption">Three</div>
</div>
</div>
<a class="carousel-control" href="#carousel-thing" data-slide="next">
<i class="icon-caret-right"></i>
</a>
<a class="carousel-control" href="#carousel-thing" data-slide="prev">
<i class="icon-caret-left"></i>
</a>
</div>
</div>
CSS
body { padding-bottom: 70px; }
JavaScript
// BEGIN BOOTSTRAP
/*!
* Bootstrap v3.3.2-pre (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
+function ($) {
var version = $.fn.jquery.split(' ')[0].split('.')
if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {
throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher')
}
}(jQuery);
/* ========================================================================
* Bootstrap: transition.js v3.3.1
* http://getbootstrap.com/javascript/#transitions
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false
var $el = this
$(this).one('bsTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback,...