rename .item => .carousel-item

docs/examples/carousel/carousel.css

@@ -21,11 +21,11 @@ body {
 }
 
 /* Declare heights because of positioning of img element */
-.carousel .item {
+.carousel-item {
   height: 32rem;
   background-color: #777;
 }
-.carousel-inner > .item > img {
+.carousel-item > img {
   position: absolute;
   top: 0;
   left: 0;

docs/examples/carousel/index.html

@@ -50,7 +50,7 @@
         <li data-target="#myCarousel" data-slide-to="2"></li>
       </ol>
       <div class="carousel-inner" role="listbox">
-        <div class="item active">
+        <div class="carousel-item active">
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
           <div class="container">
             <div class="carousel-caption text-left">
@@ -60,7 +60,7 @@
             </div>
           </div>
         </div>
-        <div class="item">
+        <div class="carousel-item">
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
           <div class="container">
             <div class="carousel-caption">
@@ -70,7 +70,7 @@
             </div>
           </div>
         </div>
-        <div class="item">
+        <div class="carousel-item">
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
           <div class="container">
             <div class="carousel-caption text-right">

docs/javascript/carousel.md

@@ -15,13 +15,13 @@ A slideshow component for cycling through elements—images or slides of text—
     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
   </ol>
   <div class="carousel-inner" role="listbox">
-    <div class="item active">
+    <div class="carousel-item active">
       <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
     </div>
-    <div class="item">
+    <div class="carousel-item">
       <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
     </div>
-    <div class="item">
+    <div class="carousel-item">
       <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
     </div>
   </div>
@@ -48,7 +48,7 @@ A slideshow component for cycling through elements—images or slides of text—
 
 ### Optional captions
 
-Add captions to your slides easily with the `.carousel-caption` element within any `.item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
+Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
 
 <div class="bs-example">
   <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
@@ -58,21 +58,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
       <li data-target="#carousel-example-captions" data-slide-to="2"></li>
     </ol>
     <div class="carousel-inner" role="listbox">
-      <div class="item active">
+      <div class="carousel-item active">
         <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
         <div class="carousel-caption">
           <h3>First slide label</h3>
           <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
         </div>
       </div>
-      <div class="item">
+      <div class="carousel-item">
         <img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
         <div class="carousel-caption">
           <h3>Second slide label</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </div>
       </div>
-      <div class="item">
+      <div class="carousel-item">
         <img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image">
         <div class="carousel-caption">
           <h3>Third slide label</h3>
@@ -92,7 +92,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
 </div>
 
 {% highlight html %}
-<div class="item">
+<div class="carousel-item">
   <img src="..." alt="...">
   <div class="carousel-caption">
     <h3>...</h3>

js/carousel.js

@@ -65,7 +65,7 @@
   }
 
   Carousel.prototype.getItemIndex = function (item) {
-    this.$items = item.parent().children('.item')
+    this.$items = item.parent().children('.carousel-item')
     return this.$items.index(item || this.$active)
   }
 
@@ -81,7 +81,7 @@
 
   Carousel.prototype.to = function (pos) {
     var that        = this
-    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
+    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.carousel-item.active'))
 
     if (pos > (this.$items.length - 1) || pos < 0) return
 
@@ -115,7 +115,7 @@
   }
 
   Carousel.prototype.slide = function (type, next) {
-    var $active   = this.$element.find('.item.active')
+    var $active   = this.$element.find('.carousel-item.active')
     var $next     = next || this.getItemForDirection(type, $active)
     var isCycling = this.interval
     var direction = type == 'next' ? 'left' : 'right'

js/tests/visual/carousel.html

@@ -22,13 +22,13 @@
       <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
     </ol>
     <div class="carousel-inner">
-      <div class="item active">
+      <div class="carousel-item active">
         <img alt="First slide" src="http://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg">
       </div>
-      <div class="item">
+      <div class="carousel-item">
         <img alt="Second slide" src="http://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg">
       </div>
-      <div class="item">
+      <div class="carousel-item">
         <img alt="Third slide" src="http://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg">
       </div>
     </div>

scss/_carousel.scss

@@ -13,7 +13,7 @@
   width: 100%;
   overflow: hidden;
 
-  > .item {
+  > .carousel-item {
     position: relative;
     display: none;
     transition: .6s ease-in-out left;