rename carousel to touch-carousel for non conflict namespace

ixisio · Sep 17, 2013 · 28f44aa · 28f44aa
1 parent 4b47916
commit 28f44aa
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 66 deletions.
diff --git a/dist/css/bootstrap-touch-carousel.css b/dist/css/bootstrap-touch-carousel.css
@@ -5,71 +5,71 @@
     More info at: http://lesselements.com
   ---------------------------------------------------*/
 /* line 39, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel {
+.touch-carousel {
   position: relative;
 }
 /* line 43, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner {
+.touch-carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
 }
 /* line 48, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .item {
+.touch-carousel-inner > .item {
   display: none;
   position: relative;
   -webkit-transition: left 0.6s ease-in-out;
   -moz-transition: left 0.6s ease-in-out;
   transition: left 0.6s ease-in-out;
 }
 /* line 55, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .item > img,
-.carousel-inner > .item > a > img {
+.touch-carousel-inner > .item > img,
+.touch-carousel-inner > .item > a > img {
   display: block;
   max-width: 100%;
   height: auto;
   line-height: 1;
 }
 /* line 62, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .active,
-.carousel-inner > .next,
-.carousel-inner > .prev {
+.touch-carousel-inner > .active,
+.touch-carousel-inner > .next,
+.touch-carousel-inner > .prev {
   display: block;
 }
 /* line 66, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .active {
+.touch-carousel-inner > .active {
   left: 0;
 }
 /* line 70, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .next,
-.carousel-inner > .prev {
+.touch-carousel-inner > .next,
+.touch-carousel-inner > .prev {
   position: absolute;
   top: 0;
   width: 100%;
 }
 /* line 77, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .next {
+.touch-carousel-inner > .next {
   left: 100%;
 }
 /* line 80, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .prev {
+.touch-carousel-inner > .prev {
   left: -100%;
 }
 /* line 83, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .next.left,
-.carousel-inner > .prev.right {
+.touch-carousel-inner > .next.left,
+.touch-carousel-inner > .prev.right {
   left: 0;
 }
 /* line 88, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .active.left {
+.touch-carousel-inner > .active.left {
   left: -100%;
 }
 /* line 91, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-inner > .active.right {
+.touch-carousel-inner > .active.right {
   left: 100%;
 }
 /* line 100, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-control {
+.touch-carousel-control {
   position: absolute;
   top: 0;
   left: 0;
@@ -87,13 +87,13 @@
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 }
 /* line 115, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-control.right {
+.touch-carousel-control.right {
   left: auto;
   right: 0;
 }
 /* line 121, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-control:hover,
-.carousel-control:focus {
+.touch-carousel-control:hover,
+.touch-carousel-control:focus {
   color: #ffffff;
   text-decoration: none;
   -moz-opacity: 0.9;
@@ -104,44 +104,44 @@
   filter: alpha(opacity=90);
 }
 /* line 129, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-control .icon-prev,
-.carousel-control .icon-next,
-.carousel-control .glyphicon-chevron-left,
-.carousel-control .glyphicon-chevron-right {
+.touch-carousel-control .icon-prev,
+.touch-carousel-control .icon-next,
+.touch-carousel-control .glyphicon-chevron-left,
+.touch-carousel-control .glyphicon-chevron-right {
   position: absolute;
   top: 50%;
   z-index: 5;
   display: inline-block;
 }
 /* line 138, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-control .icon-prev,
-.carousel-control .glyphicon-chevron-left {
+.touch-carousel-control .icon-prev,
+.touch-carousel-control .glyphicon-chevron-left {
   left: 50%;
 }
 /* line 142, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-control .icon-next,
-.carousel-control .glyphicon-chevron-right {
+.touch-carousel-control .icon-next,
+.touch-carousel-control .glyphicon-chevron-right {
   right: 50%;
 }
 /* line 146, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-control .icon-prev,
-.carousel-control .icon-next {
+.touch-carousel-control .icon-prev,
+.touch-carousel-control .icon-next {
   width: 20px;
   height: 20px;
   margin-top: -10px;
   margin-left: -10px;
   font-family: serif;
 }
 /* line 156, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-control .icon-prev:before {
+.touch-carousel-control .icon-prev:before {
   content: '\2039';
 }
 /* line 161, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-control .icon-next:before {
+.touch-carousel-control .icon-next:before {
   content: '\203a';
 }
 /* line 172, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-indicators {
+.touch-carousel-indicators {
   position: absolute;
   bottom: 10px;
   left: 50%;
@@ -153,7 +153,7 @@
   text-align: center;
 }
 /* line 183, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-indicators li {
+.touch-carousel-indicators li {
   display: inline-block;
   width: 10px;
   height: 10px;
@@ -164,14 +164,14 @@
   cursor: pointer;
 }
 /* line 193, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-indicators .active {
+.touch-carousel-indicators .active {
   margin: 0;
   width: 12px;
   height: 12px;
   background-color: #ffffff;
 }
 /* line 204, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-caption {
+.touch-carousel-caption {
   position: absolute;
   left: 15%;
   right: 15%;
@@ -184,35 +184,35 @@
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 }
 /* line 215, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-.carousel-caption .btn {
+.touch-carousel-caption .btn {
   text-shadow: none;
 }
 @media screen and (min-width: 768px) {
   /* line 226, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-  .carousel-control .glyphicons-chevron-left,
-  .carousel-control .glyphicons-chevron-right,
-  .carousel-control .icon-prev,
-  .carousel-control .icon-next {
+  .touch-carousel-control .glyphicons-chevron-left,
+  .touch-carousel-control .glyphicons-chevron-right,
+  .touch-carousel-control .icon-prev,
+  .touch-carousel-control .icon-next {
     width: 30px;
     height: 30px;
     margin-top: -15px;
     margin-left: -15px;
     font-size: 30px;
   }
   /* line 239, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-  .carousel-caption {
+  .touch-carousel-caption {
     left: 20%;
     right: 20%;
     padding-bottom: 30px;
   }
   /* line 246, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-  .carousel-indicators {
+  .touch-carousel-indicators {
     bottom: 20px;
   }
 }
 @media screen and (max-width: 768px) {
   /* line 256, /Users/andyk/Sites/Misc/_javascript/bootstrap-touch-carousel/src/less/carousel.less */
-  .carousel-caption {
+  .touch-carousel-caption {
     display: none;
   }
 }

diff --git a/dist/js/bootstrap-touch-carousel.js b/dist/js/bootstrap-touch-carousel.js
@@ -82,7 +82,7 @@
 
   var Carousel = function (element, options) {
     this.$element    = $(element)
-    this.$indicators = this.$element.find('.carousel-indicators')
+    this.$indicators = this.$element.find('.touch-carousel-indicators')
     this.options     = options
     this.paused      =
     this.sliding     =
@@ -265,7 +265,7 @@
   })
 
   $(window).on('load', function () {
-    $('[data-ride="carousel"]').each(function () {
+    $('[data-ride="touch-carousel"]').each(function () {
       var $carousel = $(this)
       $carousel.carousel($carousel.data())
     })

diff --git a/index.html b/index.html
@@ -38,18 +38,19 @@ <h1>Feel's good!</h1>
 	    	<div class="col-md-9">
 	    		<!-- Carousel
 			    ================================================== -->
-			    <div id="myCarousel" class="carousel slide" data-ride="carousel" data->
+			    <div id="myCarousel" class="touch-carousel slide" data-ride="touch-carousel" data->
 			      <!-- Indicators -->
-			      <ol class="carousel-indicators">
+			      <ol class="touch-carousel-indicators">
 			        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 			        <li data-target="#myCarousel" data-slide-to="1"></li>
 			        <li data-target="#myCarousel" data-slide-to="2"></li>
 			      </ol>
-			      <div class="carousel-inner">
+
+			      <div class="touch-carousel-inner">
 			        <div class="item active">
 			          <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
 			          <div class="container">
-			            <div class="carousel-caption">
+			            <div class="touch-carousel-caption">
 			              <h1>Example headline.</h1>
 			              <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><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@@ -59,7 +60,7 @@ <h1>Example headline.</h1>
 			        <div class="item">
 			          <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide">
 			          <div class="container">
-			            <div class="carousel-caption">
+			            <div class="touch-carousel-caption">
 			              <h1>Another example headline.</h1>
 			              <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><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
@@ -69,16 +70,16 @@ <h1>Another example headline.</h1>
 			        <div class="item">
 			          <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide">
 			          <div class="container">
-			            <div class="carousel-caption">
+			            <div class="touch-carousel-caption">
 			              <h1>One more for good measure.</h1>
 			              <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><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
 			            </div>
 			          </div>
 			        </div>
 			      </div>
-			      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
-			      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
+			      <a class="left touch-carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
+			      <a class="right touch-carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 			    </div><!-- /.carousel -->
 
 	    	</div>

diff --git a/src/js/carousel.js b/src/js/carousel.js
@@ -25,7 +25,7 @@
 
   var Carousel = function (element, options) {
     this.$element    = $(element)
-    this.$indicators = this.$element.find('.carousel-indicators')
+    this.$indicators = this.$element.find('.touch-carousel-indicators')
     this.options     = options
     this.paused      =
     this.sliding     =
@@ -208,7 +208,7 @@
   })
 
   $(window).on('load', function () {
-    $('[data-ride="carousel"]').each(function () {
+    $('[data-ride="touch-carousel"]').each(function () {
       var $carousel = $(this)
       $carousel.carousel($carousel.data())
     })

diff --git a/src/less/carousel.less b/src/less/carousel.less
@@ -36,11 +36,11 @@
 // --------------------------------------------------
 
 // Wrapper for the slide container and indicators
-.carousel {
+.touch-carousel {
   position: relative;
 }
 
-.carousel-inner {
+.touch-carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
@@ -97,7 +97,7 @@
 // Left/right controls for nav
 // ---------------------------
 
-.carousel-control {
+.touch-carousel-control {
   position: absolute;
   top: 0;
   left: 0;
@@ -169,7 +169,7 @@
 // Add an unordered list with the following class and add a list item for each
 // slide your carousel holds.
 
-.carousel-indicators {
+.touch-carousel-indicators {
   position: absolute;
   bottom: 10px;
   left: 50%;
@@ -201,7 +201,7 @@
 // Optional captions
 // -----------------------------
 // Hidden by default for smaller viewports
-.carousel-caption {
+.touch-carousel-caption {
   position: absolute;
   left: 15%;
   right: 15%;
@@ -222,7 +222,7 @@
 @media screen and (min-width: @screen-sm-min) {
 
   // Scale up the controls a smidge
-  .carousel-control {
+  .touch-carousel-control {
     .glyphicons-chevron-left,
     .glyphicons-chevron-right,
     .icon-prev,
@@ -236,14 +236,14 @@
   }
 
   // Show and left align the captions
-  .carousel-caption {
+  .touch-carousel-caption {
     left: 20%;
     right: 20%;
     padding-bottom: 30px;
   }
 
   // Move up the indicators
-  .carousel-indicators {
+  .touch-carousel-indicators {
     bottom: 20px;
   }
 }
@@ -253,7 +253,7 @@
 @media screen and (max-width: @screen-sm-min) {
 
   // Show and left align the captions
-  .carousel-caption {
+  .touch-carousel-caption {
     display: none
   }
 }