JSFiddle - React, Tailwind, and code Playground
by dezignas
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class="carousel slide span12" id="myCarousel3">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="span6">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span6">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span12">
<div class="thumbnail some_text">
<img src="http://placehold.it/260x180" alt="">
<p>some text</p>
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span8">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
</div>
<a...
CSS
body {
margin:10px;
}
img {
width:100%;
height:auto;
}
.some_text {
width:200px;
height:200px;}
JavaScript
$('[id^="myCarousel"]').carousel();
/* ===================================================
* bootstrap-touch.js v2.0.3
* http://twitter.github.com/bootstrap/javascript.html#touch
* ===================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function($) {
"use strict"; // jshint ;_;
/* TOUCH SUPPORT */
$.support.touch = (function () {
return ("ontouchend" in document)
})()
/* TOUCH CLASS DEFINITION */
var Touch = function (element,options) {
this.$element = $(element)
this.options = options
this.touch = this.build()
$.support.touch && this.$element
.on('touchstart', $.proxy(this.start, this))
.on('touchmove', $.proxy(this.move, this))
.on('touchend', $.proxy(this.end, this))
}
Touch.prototype = {
build: function() {
return {
startedAt: 0
, endedAt: 0
, startX: 0
, endX: 0
, startY: 0
, endY: 0
, isScroll: false
}
}
, start: function(e) {
this.touch.startedAt = e.timeStamp
this.touch.startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX
this.touch.startY = e.originalEvent.touches ?...