* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Mon Jan 2 19:12:52 PST 2012
+ * Date: Mon Jan 2 22:30:09 PST 2012
*/
html, body {
margin: 0;
.carousel {
position: relative;
}
+.carousel .carousel-inner {
+ overflow: hidden;
+ width: 100%;
+ position: relative;
+}
.carousel .item {
display: none;
+ position: relative;
+ -webkit-transition: 0.25s linear left;
+ -moz-transition: 0.25s linear left;
+ -ms-transition: 0.25s linear left;
+ -o-transition: 0.25s linear left;
+ transition: 0.25s linear left;
}
-.carousel .active {
+.carousel .active, .carousel .next, .carousel .prev {
display: block;
}
+.carousel .next, .carousel .prev {
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+.carousel .next {
+ left: 100%;
+}
+.carousel .prev {
+ left: -100%;
+}
+.carousel .next.left, .carousel .prev.right {
+ left: 0%;
+}
+.carousel .active.left {
+ left: -100%;
+}
+.carousel .active.right {
+ left: 100%;
+}
.carousel .nav {
+ width: auto;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
height: 50px;
position: absolute;
top: 50%;
a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
.thumbnail>img{display:block;max-width:100%;}
.thumbnail .caption{padding:9px;}
-.carousel{position:relative;}.carousel .item{display:none;}
-.carousel .active{display:block;}
-.carousel .nav{height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;}
+.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;}
+.carousel .item{display:none;position:relative;-webkit-transition:0.25s linear left;-moz-transition:0.25s linear left;-ms-transition:0.25s linear left;-o-transition:0.25s linear left;transition:0.25s linear left;}
+.carousel .active,.carousel .next,.carousel .prev{display:block;}
+.carousel .next,.carousel .prev{position:absolute;top:0;width:100%;}
+.carousel .next{left:100%;}
+.carousel .prev{left:-100%;}
+.carousel .next.left,.carousel .prev.right{left:0%;}
+.carousel .active.left{left:-100%;}
+.carousel .active.right{left:100%;}
+.carousel .nav{width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;}
.carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);}
.hidden{display:none;visibility:hidden;}
@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
<pre class="prettyprint linenums">
<div class="thumbnail carousel">
- <!-- navigation -->
- <a class="nav" href="#myCarousel" data-show="next">&lt;</a>
- <a class="nav" href="#myCarousel" data-show="previous">&gt;</a>
-
<!-- items -->
- <div class="item active">
- <img src="http://placehold.it/1100x350">
- <div class="caption">
- <h5>Thumbnail label</h5>
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
+ <div class="carousel-inner">
+ <div class="item active">
+ <img src="http://placehold.it/1100x350">
+ <div class="caption">
+ <h5>Thumbnail label</h5>
+ <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
+ </div>
</div>
- </div>
- <div class="item">
- <img src="http://placehold.it/1100x350">
- <div class="caption">
- <h5>Thumbnail label</h5>
- <p>Donec id elit non mi porta gravida at eget metus.</p>
+ <div class="item">
+ <img src="http://placehold.it/1100x350">
+ <div class="caption">
+ <h5>Thumbnail label</h5>
+ <p>Donec id elit non mi porta gravida at eget metus.</p>
+ </div>
</div>
</div>
+ <!-- navigation -->
+ <a class="nav" href="#myCarousel" data-slide="next">&lt;</a>
+ <a class="nav" href="#myCarousel" data-slide="prev">&gt;</a>
+
</div>
</pre>
<h3>Demo</h3>
<!-- carousel -->
- <div id="myCarousel" class="thumbnail carousel">
+ <div id="myCarousel" class="thumbnail carousel slide">
- <a class="left nav" href="#myCarousel" data-show="next">«</a>
- <a class="right nav" href="#myCarousel" data-show="previous">»</a>
-
- <div class="item active">
- <img src="http://placehold.it/1100x350" alt="">
- <div class="caption">
- <h5>Thumbnail label</h5>
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <div class="carousel-inner">
+ <div class="item active">
+ <img src="http://placehold.it/1100x400" alt="">
+ <div class="caption">
+ <h5>First Thumbnail label</h5>
+ <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ </div>
</div>
- </div>
- <div class="item">
- <img src="http://placehold.it/1100x350" alt="">
- <div class="caption">
- <h5>Thumbnail label</h5>
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <div class="item">
+ <img src="http://placehold.it/1100x400" alt="">
+ <div class="caption">
+ <h5>Second Thumbnail label</h5>
+ <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ </div>
</div>
- </div>
- <div class="item">
- <img src="http://placehold.it/1100x350" alt="">
- <div class="caption">
- <h5>Thumbnail label</h5>
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <div class="item">
+ <img src="http://placehold.it/1100x400" alt="">
+ <div class="caption">
+ <h5>Third Thumbnail label</h5>
+ <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ </div>
</div>
</div>
+ <a class="left nav" href="#myCarousel" data-slide="prev">«</a>
+ <a class="right nav" href="#myCarousel" data-slide="next">»</a>
+
</div>
</div>
btn.button('reset')
}, 3000)
})
-
- // carousel demo
- $('.carousel').carousel()
})
</script>
</body>
var Carousel = function (element) {
this.$element = $(element)
- this.cycle()
}
Carousel.prototype = {
cycle: function () {
- this.interval = setInterval($.proxy(this.right, this), 500)
+ this.interval = setInterval($.proxy(this.next, this), 5000)
}
, pause: function () {
clearInterval(this.interval)
}
- , right: function () {
-
+ , next: function () {
+ this.slide('next')
}
- , left: function () {
+ , prev: function () {
+ this.slide('prev')
+ }
+ , slide: function (type) {
+ var $active = this.$element.find('.active')
+ , $next = $active[type]()
+ , direction = type == 'next' ? 'left' : 'right'
+ , fallback = type == 'next' ? 'first' : 'last'
+ , that = this
+
+ $next = $next.length ? $next : this.$element.find('.item')[fallback]()
+
+ if (!$.support.transition && this.$element.hasClass('slide')) {
+ $active.removeClass('active')
+ $next.addClass('active')
+ } else {
+ $next.addClass(type)
+ $next[0].offsetWidth // force reflow
+ $active.addClass(direction)
+ $next.addClass(direction)
+ this.$element.one($.support.transition.end, function () {
+ $next.removeClass([type, direction].join(' ')).addClass('active')
+ $active.removeClass(['active', direction].join(' '))
+ })
+ }
}
}
var $this = $(this)
, data = $this.data('carousel')
if (!data) $this.data('carousel', (data = new Carousel(this)))
- if (typeof option == 'string') data[option].call($this)
+ if (typeof option == 'string') data[option]()
})
}
$.fn.carousel.Constructor = Carousel
+
+ /* CAROUSEL DATA-API
+ * ================= */
+
+ $(function () {
+ $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
+ var $this = $(this)
+ , $target = $($this.attr('data-target') || $this.attr('href'))
+
+ $target.carousel($this.attr('data-slide'))
+ })
+ })
+
}( window.jQuery )
\ No newline at end of file
padding: 9px;
}
-// carousel
.carousel {
+
position: relative;
- .item { display: none; }
- .active { display: block; }
+ .carousel-inner {
+ overflow: hidden;
+ width: 100%;
+ position: relative;
+ }
+
+ .item {
+ display: none;
+ position: relative;
+ .transition(.25s linear left);
+ }
+
+ .active, .next, .prev { display: block; }
+
+ .next, .prev {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+
+ .next { left: 100%; }
+ .prev { left: -100%; }
+ .next.left, .prev.right { left: 0% }
+
+ .active.left { left: -100% }
+ .active.right { left: 100% }
.nav {
+ width: auto;
+ .border-radius(0);
height: 50px;
position: absolute;
top: 50%;
projects / thirdparty / bootstrap.git / commitdiff
