Merge pull request #29 from Dclapperton/master

Firefox carousel fix
ResponsiveBP · Jul 31, 2014 · 47d2d17 · 47d2d17
2 parents 6c64382 + e7e5cf5
commit 47d2d17
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 85 deletions.
diff --git a/build/responsive.css b/build/responsive.css
@@ -3298,6 +3298,10 @@ pre {
         -o-transition: .7s ease-in-out -o-transform,.7s ease-in-out left;
         transition: .7s ease-in-out transform,.7s ease-in-out left;
         -webkit-transform: translate3d(0,0,0);
+        -moz-transform: translate3d(0,0,0);
+        -ms-transform: translate3d(0,0,0);
+        -o-transform: translate3d(0,0,0);
+        transform: translate3d(0,0,0);
     }
 
         .carousel > figure > img {
@@ -3325,12 +3329,7 @@ pre {
         .carousel .carousel-active,
         .carousel .next.left,
         .carousel .prev.right {
-            -webkit-transform: translateX(0);
-            -moz-transform: translateX(0);
-            -ms-transform: translateX(0);
-            -o-transform: translateX(0);
-            transform: translateX(0);
-            left: 0\9;
+            left: 0;
         }
 
     .carousel .carousel-active {
@@ -3350,36 +3349,14 @@ pre {
 
     .carousel .next,
     .carousel .carousel-active.right {
-        -webkit-transform: translateX(100%);
-        -moz-transform: translateX(100%);
-        -ms-transform: translateX(100%);
-        -o-transform: translateX(100%);
-        transform: translateX(100%);
-        left: 100%\9;
+        left: 100%;
     }
 
     .carousel .prev,
     .carousel .carousel-active.left {
-        -webkit-transform: translateX(-100%);
-        -moz-transform: translateX(-100%);
-        -ms-transform: translateX(-100%);
-        -o-transform: translateX(-100%);
-        transform: translateX(-100%);
-        left: -100%\9;
+        left: -100%;
     }
 
-    /*
-     * 1.  IE10 is picking up on the left positioning :(
-     */
-    x::-ms-reveal,
-    .carousel .next,
-    .carousel .prev,
-    .carousel .carousel-active.left,
-    .carousel .carousel-active.right {
-        left: 0; /* 1 */
-    }
-
-
 .carousel-control,
 .carousel-control:visited {
     position: absolute;

diff --git a/build/responsive.js b/build/responsive.js
@@ -380,6 +380,7 @@
 
         return options;
     };
+
 }(jQuery, window, document));
 /*
  * Responsive AutoSize
@@ -689,8 +690,8 @@
                     if (Math.abs(percent) < 100 && Math.abs(percent) > 5) {
                         this.$element.addClass("no-transition");
                         if (this.options.mode === "slide") {
-                            $activeItem.css({ "transform": "translate(" + percent + "%, 0)" });
-                            $nextItem.addClass("swipe").css({ "transform": "translate(" + (percent + diff) + "%, 0)" });
+                            $activeItem.css({ "left": percent + "%" });
+                            $nextItem.addClass("swipe").css({ "left": (percent + diff) + "%" });
                         } else {
                             $activeItem.addClass("swipe").css({ "opacity": 1 - Math.abs((percent / 100)) });
                             $nextItem.addClass("swipe");
@@ -914,7 +915,7 @@
         }
 
         if ($nextItem.hasClass("carousel-active")) {
-            return false;
+            return (this.sliding = false);
         }
 
         // Trigger the slide event with positional data.
@@ -956,7 +957,7 @@
             if (self.$items) {
                 // Clear the transition properties if set.
                 self.$items.each(function () {
-                    $(this).css({ "transition": "", "opacity": "" });
+                    $(this).css({ "transition-duration": "" });
                 });
             }
 
@@ -978,7 +979,7 @@
         // Clear the added css.
         if (this.$items) {
             this.$items.each(function () {
-                $(this).removeClass("swipe").css({ "transform": "", "opacity": "" });
+                $(this).removeClass("swipe").css({ "left": "", "opacity": "" });
             });
         }
 

diff --git a/build/responsive.min.css b/build/responsive.min.css
diff --git a/build/responsive.min.js b/build/responsive.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "responsive",
   "description": "A super lightweight HTML, CSS, and JavaScript framework for building responsive websites.",
-  "version": "2.5.4",
+  "version": "2.5.7",
   "keywords": [
     "responsive",
     "css",
@@ -25,15 +25,15 @@
     }
   ],
   "devDependencies": {
-    "gulp": "~3.6.0",
-    "gulp-util": "~2.2.14",
-    "gulp-rename": "~1.2.0",
-    "gulp-concat": "~2.2.0",
+    "event-stream": "~3.1.2",
+    "gulp": "^3.8.6",
+    "gulp-clean": "^0.2.4",
+    "gulp-concat": "^2.2.0",
+    "gulp-jshint": "^1.5.6",
     "gulp-minify-css": "~0.3.1",
-    "gulp-zip": "~0.3.4",
-    "gulp-uglify": "~0.2.1",
-    "gulp-jshint": "~1.5.3",
-    "gulp-clean": "~0.2.4",
-    "event-stream": "~3.1.2"
+    "gulp-rename": "~1.2.0",
+    "gulp-uglify": "^0.2.1",
+    "gulp-util": "^2.2.20",
+    "gulp-zip": "^0.3.4"
   }
 }
diff --git a/src/css/carousel.css b/src/css/carousel.css
@@ -18,6 +18,10 @@
         -o-transition: .7s ease-in-out -o-transform,.7s ease-in-out left;
         transition: .7s ease-in-out transform,.7s ease-in-out left;
         -webkit-transform: translate3d(0,0,0);
+        -moz-transform: translate3d(0,0,0);
+        -ms-transform: translate3d(0,0,0);
+        -o-transform: translate3d(0,0,0);
+        transform: translate3d(0,0,0);
     }
 
         .carousel > figure > img {
@@ -45,12 +49,7 @@
         .carousel .carousel-active,
         .carousel .next.left,
         .carousel .prev.right {
-            -webkit-transform: translateX(0);
-            -moz-transform: translateX(0);
-            -ms-transform: translateX(0);
-            -o-transform: translateX(0);
-            transform: translateX(0);
-            left: 0\9;
+            left: 0;
         }
 
     .carousel .carousel-active {
@@ -70,36 +69,14 @@
 
     .carousel .next,
     .carousel .carousel-active.right {
-        -webkit-transform: translateX(100%);
-        -moz-transform: translateX(100%);
-        -ms-transform: translateX(100%);
-        -o-transform: translateX(100%);
-        transform: translateX(100%);
-        left: 100%\9;
+        left: 100%;
     }
 
     .carousel .prev,
     .carousel .carousel-active.left {
-        -webkit-transform: translateX(-100%);
-        -moz-transform: translateX(-100%);
-        -ms-transform: translateX(-100%);
-        -o-transform: translateX(-100%);
-        transform: translateX(-100%);
-        left: -100%\9;
+        left: -100%;
     }
 
-    /*
-     * 1.  IE10 is picking up on the left positioning :(
-     */
-    x::-ms-reveal,
-    .carousel .next,
-    .carousel .prev,
-    .carousel .carousel-active.left,
-    .carousel .carousel-active.right {
-        left: 0; /* 1 */
-    }
-
-
 .carousel-control,
 .carousel-control:visited {
     position: absolute;

diff --git a/src/js/responsive.carousel.js b/src/js/responsive.carousel.js
@@ -93,8 +93,8 @@
                     if (Math.abs(percent) < 100 && Math.abs(percent) > 5) {
                         this.$element.addClass("no-transition");
                         if (this.options.mode === "slide") {
-                            $activeItem.css({ "transform": "translate(" + percent + "%, 0)" });
-                            $nextItem.addClass("swipe").css({ "transform": "translate(" + (percent + diff) + "%, 0)" });
+                            $activeItem.css({ "left": percent + "%" });
+                            $nextItem.addClass("swipe").css({ "left": (percent + diff) + "%" });
                         } else {
                             $activeItem.addClass("swipe").css({ "opacity": 1 - Math.abs((percent / 100)) });
                             $nextItem.addClass("swipe");
@@ -318,7 +318,7 @@
         }
 
         if ($nextItem.hasClass("carousel-active")) {
-            return false;
+            return (this.sliding = false);
         }
 
         // Trigger the slide event with positional data.
@@ -360,7 +360,7 @@
             if (self.$items) {
                 // Clear the transition properties if set.
                 self.$items.each(function () {
-                    $(this).css({ "transition": "", "opacity": "" });
+                    $(this).css({ "transition-duration": "" });
                 });
             }
 
@@ -382,7 +382,7 @@
         // Clear the added css.
         if (this.$items) {
             this.$items.each(function () {
-                $(this).removeClass("swipe").css({ "transform": "", "opacity": "" });
+                $(this).removeClass("swipe").css({ "left": "", "opacity": "" });
             });
         }
 

diff --git a/tests/carousel/all.html b/tests/carousel/all.html
@@ -30,7 +30,7 @@ <h2>Slide Mode</h2>
                     <ol>
                         <li data-carousel-target="#carousel-1" data-carousel-slide-to="0" class="active"></li>
                         <li data-carousel-target="#carousel-1" data-carousel-slide-to="1"></li>
-                        <li data-carousel-target="#carousel-1" data-carousel-slide-to="2"></li>
+                        <!--<li data-carousel-target="#carousel-1" data-carousel-slide-to="2"></li>-->
                     </ol>
 
                     <figure class="carousel-active">
@@ -40,13 +40,13 @@ <h4>First Thumbnail label</h4>
                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                         </figcaption>
                     </figure>
-                    <figure>
+                    <!--<figure>
                         <img src="../test-assets/img/chrysanthemum.jpg" alt="chrysanthemum">
                         <figcaption>
                             <h4>Second Thumbnail label</h4>
                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                         </figcaption>
-                    </figure>
+                    </figure>-->
                     <figure>
                         <img src="../test-assets/img/desert.jpg" alt="desert">
                         <figcaption>