placeholder design for carousel

diff --git a/bootstrap.css b/bootstrap.css
index 601c1875b9540684cf948de00758ee9a5e7539ac..ae1754aa651485a2834a8602b5a0f2643bf0a2fb 100644 (file)
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * 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 16:04:30 PST 2012
+ * Date: Mon Jan  2 19:12:52 PST 2012
  */
 html, body {
   margin: 0;
@@ -491,7 +491,7 @@ address {
 }
 code, pre {
   padding: 0 3px 2px;
-  font-family: Menlo, Monaco, Courier New, monospace;
+  font-family: Menlo, Monaco, "Courier New", monospace;
   font-size: 12px;
   color: #404040;
   -webkit-border-radius: 3px;
@@ -2584,12 +2584,36 @@ a.thumbnail:hover {
 .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 .nav:hover {
+  text-decoration: none;
+  background: rgba(0, 0, 0, 0.8);
+}
 .hidden {
   display: none;
   visibility: hidden;

diff --git a/bootstrap.min.css b/bootstrap.min.css
index b3e5a3eefea80f816f4ecf90523f8bdb0cb11577..22725022633e6232c9b4b8ae93fe3c4bc860601e 100644 (file)
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -87,7 +87,7 @@ blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}bloc
 blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
 blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
 address{display:block;margin-bottom:18px;line-height:18px;}
-code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Courier New, monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
 code{padding:1px 3px;background-color:#fee9cc;}
 pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
 pre code{padding:0;background-color:transparent;}
@@ -342,7 +342,9 @@ 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);}
 .thumbnail>img{display:block;max-width:100%;}
 .thumbnail .caption{padding:9px;}
-.carousel .item{display:none;}
+.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 .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;}}

diff --git a/docs/javascript.html b/docs/javascript.html
index 8e5e22adba2e4670bf0b9c94f83da64641a56275..ae464e849eb5dd6c5375789120dac7e1a5a5652f 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -118,8 +118,8 @@
               <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td>
             </tr>
             <tr>
-              <td><a href="./javascript.html#collapse">bootstrap-carousel.js</a></td>
-              <td>Carousel add</td>
+              <td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td>
+              <td>A plugin for rotating through elements. A merry-go-round.</td>
             </tr>
          </tbody>
        </table>
@@ -1015,7 +1015,7 @@ $('#myCollapsible').on('hidden', function () {
       </div>
       <div class="row">
         <div class="span3 columns">
-          <p>The carousel plugin creates a carousel douh..</p>
+          <p>A generic plugin for cycling through elements. A merry-go-round.</p>
           <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a>
         </div>
         <div class="span9 columns">
@@ -1023,11 +1023,40 @@ $('#myCollapsible').on('hidden', function () {
           <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
             <h3>Markup</h3>
           <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
-          <pre class="prettyprint linenums"></pre>
+<pre class="prettyprint linenums">
+&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;div class="item active"&gt;
+    &lt;img src="http://placehold.it/1100x350"&gt;
+    &lt;div class="caption"&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 class="item"&gt;
+    &lt;img src="http://placehold.it/1100x350"&gt;
+    &lt;div class="caption"&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;/div&gt;
+  &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
           <h3>Demo</h3>
 
           <!-- carousel -->
-          <div class="thumbnail carousel">
+
+          <div id="myCarousel" class="thumbnail carousel">
+
+           <a class="left nav" href="#myCarousel" data-show="next">&laquo;</a>
+           <a class="right nav" href="#myCarousel" data-show="previous">&raquo;</a>
 
             <div class="item active">
               <img src="http://placehold.it/1100x350" alt="">
@@ -1037,7 +1066,7 @@ $('#myCollapsible').on('hidden', function () {
               </div>
             </div>
 
-            <div class="item active">
+            <div class="item">
               <img src="http://placehold.it/1100x350" alt="">
               <div class="caption">
                 <h5>Thumbnail label</h5>
@@ -1055,8 +1084,6 @@ $('#myCollapsible').on('hidden', function () {
 
           </div>
 
-
-
         </div>
       </div>
     </section>

diff --git a/lib/thumbnails.less b/lib/thumbnails.less
index ae2e6c94e91ef11ae33926d36e680a2f843ddf21..181cca6817cb0efc612da75749b1930f3c8cd04a 100644 (file)
--- a/lib/thumbnails.less
+++ b/lib/thumbnails.less
@@ -33,10 +33,26 @@ a.thumbnail:hover {
   padding: 9px;
 }
 
-.carousel .item {
-  display: none;
-}
+// carousel
+.carousel {
+  position: relative;
 
-.carousel .active {
-  display: block;
+  .item { display: none; }
+  .active { display: block; }
+
+  .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;
+    &.right { right: 5px; left: auto; }
+    &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); }
+  }
 }
\ No newline at end of file