Skip to content
GitLab
Commit 3fb6f6ee authored by Jacob Thornton's avatar Jacob Thornton
Browse files

basic carousel implementation

parent 8b58a1c3
17 merge requests!14752.0 wip,!1403warningText and warningBackground docs fix,!985Fix id anchor javascript,!906Twipsy now respects custom classes,!13512.0 wip - relative font sizes,!1315[2.0-wip] Fix mustache glob when building,!1268[wip-2.0] IE 7/8 Typehead JS fix,!12362.0 wip - Fix for issue #1202,!1219Removed dotted outline on navbar dropdown menu,!1210Missing icon class from examples,!1195Fixed display of secondary container,!1090Fixed typo,!1084Default `.border-radius-custom` values,!1064Typo Fix in tables.less,!10572.0 wip,!1052Missing data attribute to close modal,!10212.0 wip
Hide whitespace changes
Inline Side-by-side
Showing
with 158 additions and 53 deletions
+158 -53
bootstrap.css
+ 37
- 2
View file @ 3fb6f6ee
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 { html, body {
margin: 0; margin: 0;
...@@ -2587,13 +2587,48 @@ a.thumbnail:hover { ...@@ -2587,13 +2587,48 @@ a.thumbnail:hover {
.carousel { .carousel {
position: relative; position: relative;
} }
.carousel .carousel-inner {
overflow: hidden;
width: 100%;
position: relative;
}
.carousel .item { .carousel .item {
display: none; 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; 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 { .carousel .nav {
width: auto;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
height: 50px; height: 50px;
position: absolute; position: absolute;
top: 50%; top: 50%;
......
bootstrap.min.css
+ 10
- 3
View file @ 3fb6f6ee
...@@ -342,9 +342,16 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; ...@@ -342,9 +342,16 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
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);} 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>img{display:block;max-width:100%;}
.thumbnail .caption{padding:9px;} .thumbnail .caption{padding:9px;}
.carousel{position:relative;}.carousel .item{display:none;} .carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;}
.carousel .active{display:block;} .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 .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 .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);} .carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);}
.hidden{display:none;visibility:hidden;} .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;}} @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;}}
docs/javascript.html
+ 40
- 39
View file @ 3fb6f6ee
...@@ -1026,62 +1026,66 @@ $('#myCollapsible').on('hidden', function () { ...@@ -1026,62 +1026,66 @@ $('#myCollapsible').on('hidden', function () {
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="thumbnail carousel"&gt; &lt;div class="thumbnail carousel"&gt;
&lt;!-- navigation --&gt;
&lt;a class="nav" href="#myCarousel" data-show="next"&gt;&amp;lt;&lt;/a&gt;
&lt;a class="nav" href="#myCarousel" data-show="previous"&gt;&amp;gt;&lt;/a&gt;
&lt;!-- items --&gt; &lt;!-- items --&gt;
&lt;div class="item active"&gt; &lt;div class="carousel-inner"&gt;
&lt;img src="http://placehold.it/1100x350"&gt; &lt;div class="item active"&gt;
&lt;div class="caption"&gt; &lt;img src="http://placehold.it/1100x350"&gt;
&lt;h5&gt;Thumbnail label&lt;/h5&gt; &lt;div class="caption"&gt;
&lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. &lt;/p&gt; &lt;h5&gt;Thumbnail label&lt;/h5&gt;
&lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. &lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;div class="item"&gt; &lt;div class="item"&gt;
&lt;img src="http://placehold.it/1100x350"&gt; &lt;img src="http://placehold.it/1100x350"&gt;
&lt;div class="caption"&gt; &lt;div class="caption"&gt;
&lt;h5&gt;Thumbnail label&lt;/h5&gt; &lt;h5&gt;Thumbnail label&lt;/h5&gt;
&lt;p&gt;Donec id elit non mi porta gravida at eget metus.&lt;/p&gt; &lt;p&gt;Donec id elit non mi porta gravida at eget metus.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;!-- navigation --&gt;
&lt;a class="nav" href="#myCarousel" data-slide="next"&gt;&amp;lt;&lt;/a&gt;
&lt;a class="nav" href="#myCarousel" data-slide="prev"&gt;&amp;gt;&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Demo</h3> <h3>Demo</h3>
<!-- carousel --> <!-- carousel -->
<div id="myCarousel" class="thumbnail carousel"> <div id="myCarousel" class="thumbnail carousel slide">
<a class="left nav" href="#myCarousel" data-show="next">&laquo;</a> <div class="carousel-inner">
<a class="right nav" href="#myCarousel" data-show="previous">&raquo;</a> <div class="item active">
<img src="http://placehold.it/1100x400" alt="">
<div class="item active"> <div class="caption">
<img src="http://placehold.it/1100x350" alt=""> <h5>First Thumbnail label</h5>
<div class="caption"> <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>
<h5>Thumbnail label</h5> </div>
<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"> <div class="item">
<img src="http://placehold.it/1100x350" alt=""> <img src="http://placehold.it/1100x400" alt="">
<div class="caption"> <div class="caption">
<h5>Thumbnail label</h5> <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> <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>
<div class="item"> <div class="item">
<img src="http://placehold.it/1100x350" alt=""> <img src="http://placehold.it/1100x400" alt="">
<div class="caption"> <div class="caption">
<h5>Thumbnail label</h5> <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> <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> </div>
<a class="left nav" href="#myCarousel" data-slide="prev">&laquo;</a>
<a class="right nav" href="#myCarousel" data-slide="next">&raquo;</a>
</div> </div>
</div> </div>
...@@ -1139,9 +1143,6 @@ $('#myCollapsible').on('hidden', function () { ...@@ -1139,9 +1143,6 @@ $('#myCollapsible').on('hidden', function () {
btn.button('reset') btn.button('reset')
}, 3000) }, 3000)
}) })
// carousel demo
$('.carousel').carousel()
}) })
</script> </script>
</body> </body>
......
js/bootstrap-carousel.js
+ 42
- 6
View file @ 3fb6f6ee
...@@ -27,25 +27,48 @@ ...@@ -27,25 +27,48 @@
var Carousel = function (element) { var Carousel = function (element) {
this.$element = $(element) this.$element = $(element)
this.cycle()
} }
Carousel.prototype = { Carousel.prototype = {
cycle: function () { cycle: function () {
this.interval = setInterval($.proxy(this.right, this), 500) this.interval = setInterval($.proxy(this.next, this), 5000)
} }
, pause: function () { , pause: function () {
clearInterval(this.interval) 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(' '))
})
}
} }
} }
...@@ -59,10 +82,23 @@ ...@@ -59,10 +82,23 @@
var $this = $(this) var $this = $(this)
, data = $this.data('carousel') , data = $this.data('carousel')
if (!data) $this.data('carousel', (data = new Carousel(this))) 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 $.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 ) }( window.jQuery )
\ No newline at end of file
lib/thumbnails.less
+ 29
- 3
View file @ 3fb6f6ee
...@@ -33,14 +33,40 @@ a.thumbnail:hover { ...@@ -33,14 +33,40 @@ a.thumbnail:hover {
padding: 9px; padding: 9px;
} }
// carousel
.carousel { .carousel {
position: relative; position: relative;
.item { display: none; } .carousel-inner {
.active { display: block; } 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 { .nav {
width: auto;
.border-radius(0);
height: 50px; height: 50px;
position: absolute; position: absolute;
top: 50%; top: 50%;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment