refactor(carousel): transitions refactor :

- single slide based transitions - externalize some services - use shifty.js for transitions - fix bunch of issues
revolunet · Oct 13, 2014 · 755d3c7 · 755d3c7
1 parent 0ebcfd0
commit 755d3c7
Show file tree

Hide file tree

Showing 16 changed files with 3,943 additions and 1,330 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,6 @@ Comments and contributions welcome :)
 
 Proudly brought to you by the [@revolunet](http://twitter.com/revolunet) team.
 
-**NOTE :** if you use IE<=9, iOS<7 or Android<4 please include the [requestAnimationFrame polyfill](https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js) in your application.
 
 ## Usage :
 
@@ -28,7 +27,7 @@ angular.module('MyApp', ['angular-carousel']);
  - Add a `rn-carousel` attribute to your `<ul>` block and your `<li>`'s become magically swipable ;)
 ```html
 <ul rn-carousel class="image">
-  <li ng-repeat="image in sportImages" ng-style="{ backgroundImage: 'url(' + image + ')' }">
+  <li ng-repeat="image in sportImages">
     <div class="layer">{{ image }}</div>
   </li>
 </ul>
@@ -43,27 +42,31 @@ angular.module('MyApp', ['angular-carousel']);
 </ul>
 ```
 
+## Directive options :
+ - `rn-carousel-index` two way binding to control the carousel position (0-indexed)
+ - `rn-carousel-buffered` add this attribute to enable the carousel buffering, good to minimize the DOM (5 slides)
+ - `rn-carousel-controls` add this attribute to enable builtin prev/next buttons (you can override by CSS)
+ - `rn-carousel-auto-slide` add this attribute to make the carousel slide automatically after given seconds (default=3)
+ - `rn-carousel-transition` : transition type, can be one of `slide,zoom,hexagon,none,slideAndFade`. (default=slide)
 
+## Indicators
 
-## Features :
- - Mobile friendly, tested on webkit+firefox
- - Use CSS 3D transformations and `requestAnimationFrame`. (fallback to CSS 2D if 3D support not available)
- - DOM buffering
- - Index data-binding
- - Optional indicators
+You can add position indicators by adding this directive where you want :
+```html
+<div rn-carousel-indicators ng-if="slides.length > 1" slides="slides" rn-carousel-index="carouselIndex"></div>
+```
+ - `slides` is the same collection you use in the carousel ng-repeat
+ - `carouselIndex` is the same index you've defined for the carousel
 
-### Regular carousel :
- - `rn-carousel-index` two way binding to control the carousel position.
- - `rn-carousel-indicator` boolean value to enable the indicator, see demo page.
- - `rn-carousel-buffered` boolean value to enable the carousel buffering, good to minimize the DOM, defaults to 5 slides. (works only with arrays)
- - `rn-carousel-swipe` boolean value to enable/disable swiping (default true)
- - `rn-carousel-control` boolean value to enable builtin prev/next buttons (you can override by CSS)
- - `rn-carousel-auto-slide` integer value will make the slider automatically change the visible slide after given seconds
- - `rn-carousel-pause-on-hover="true"` prevent auto-slide on hover
- - `rn-carousel-prevent-animation="true"` if you dont want animations
+## Notes :
+ - if you use IE<=9, iOS<7 or Android<4 please include the [requestAnimationFrame polyfill](https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js) in your application.
+ - don't set any style attribute to your li's. they would be overwritten by the carousel (use classes instead).
+ - angular-carousel use the great [shifty.js](https://github.com/jeremyckahn/shifty) for the animations
 
 ## Todo :
- - see the [TODO file](./TODO)
+ - customisable transitions
+ - more transition types
+ - infinite loop support
 
 ## Contributing 
  - Please follow [AngularJS GIT conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#)

diff --git a/TODO b/TODO
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-carousel",
   "description": "Angular Carousel - Mobile friendly touch carousel for AngularJS",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "homepage": "http://revolunet.github.com/angular-carousel",
   "author": "Julien Bouquillon <[email protected]>",
   "repository": {

diff --git a/demo/demo.css b/demo/demo.css
@@ -22,110 +22,42 @@ h3 {
   font-size:30px;
   margin: 30px 0 10px 0;
 }
-.my-slider {
-    width: 450px;
-    height: 300px;
-    font-size:0;
-}
-.my-slider li {
-    box-sizing: border-box;
-    font-size:30px;
-    position:relative;
+
+.center {
+    text-align: center;
 }
-.my-slider li div.debug {
-    box-sizing: border-box;
-    position:absolute;
-    bottom:0;
-    height:50px;
-    background:rgba(0,0,0,0.7);
+.bgimage {
+    text-align:right;
     color:white;
-    font-size:12px;
-    width:100%;
-    padding:5px;
+    background-size:cover;
+    height: 100%;
 }
-.my-slider.standard li {
-    text-align:center;
-    padding:20px;
-    font-size:20px;
+
+ul[rn-carousel] {
+    width:400px;
+    height:200px;
+    margin: 0 auto;
 }
-.big {
-    margin-top:30px;
+
+.carousel5 li {
     width:100%;
+    height:100%;
     font-size:30px;
+    background-color: #ccc;
 }
-.controls {
-    margin-top:5px;
-    width:450px;
+
+div.carousel-demo {
+    margin-top:20px;
+    display:inline-block;
     text-align: center;
 }
-.ng-cloak {
-  display:none;
-}
-.center {
-    text-align:center;
-}
-.thumbs {
-    width:450px;
+
+input.tiny {
+    width:50px;
     text-align:center;
 }
-.thumb {
-    display: inline-block;
-    background-size:cover;
-    border:1px solid transparent;
-    margin:2px 4px;
-    width:60px;
-    height:40px;
-    transition: border 0.2s ease-in;
-}
-.is-active {
-    border:1px solid red;
-}
-.details {
-    color:white;
-    font-size:12px;
-    margin-bottom:10px;
-}
-.button{
-    display: inline-block;
-    text-decoration: none;
-    font: bold 12px/12px HelveticaNeue, Arial;
-    padding: 8px 11px;
-    color: #555;
-    border: 1px solid #dedede;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    cursor:pointer;
-}
-.button:disabled {
-    cursor: default !important;
-    color: #aaa !important;
-}
-.button.grey{
-    background: #bdbdbd;
-    background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#aeaeae)); /*  WebKit */
-    background: -moz-linear-gradient(top,  #cacaca, #aeaeae);
-    border-color: #b5b5b5 #a1a1a1 #8f8f8f;
-    color: #555;
-    text-shadow: 0 1px 0 #d4d4d4;
-}
-.button.grey:hover{
-    background: #c2c2c2;
-    background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbc), to(#c2c2c2)); /*  WebKit */
-    background: -moz-linear-gradient(top,  #bcbcbc, #c2c2c2);
-    border-color: #989898 #8e8e8e #878787;
-    text-shadow: 0 1px 0 #dadada;
-}
 
-/* override default controls */
-.rn-carousel-control {
-    font-size:50px !important;
-    color:white;
-    opacity: 1;
-}
-.rn-carousel-control.rn-carousel-control-prev {
-    left: 5px;
-}
-.rn-carousel-control.rn-carousel-control-next {
-    right: 5px;
+
+ul[rn-carousel-transition="hexagon"] {
+  margin-left:100px;
 }
diff --git a/dist/angular-carousel.css b/dist/angular-carousel.css
@@ -1,73 +1,58 @@
-/* variables */
-/* general */
-.rn-carousel-container {
+body {
+  background: #ccc; }
+
+input[type=range] {
+  width: 300px; }
+
+ul[rn-carousel] {
   overflow: hidden;
+  padding: 0;
+  white-space: nowrap;
   position: relative;
+  -webkit-perspective: 1000px;
+  -ms-perspective: 1000px;
+  perspective: 1000px;
   -ms-touch-action: none;
   touch-action: none; }
+  ul[rn-carousel] li {
+    color: black;
+    -webkit-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+    overflow: visible;
+    vertical-align: top;
+    position: absolute;
+    left: 0;
+    right: 0;
+    white-space: normal;
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    width: 100%;
+    height: 100%;
+    display: inline-block; }
 
-.rn-carousel-slides {
-  -webkit-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  position: relative;
-  white-space: nowrap;
-  overflow: visible;
-  padding: 0;
-  margin: 0; }
+/* prevent flickering when moving buffer */
+ul[rn-carousel-buffered] li {
+  display: none; }
 
-/* IE 9 */
-:root .rn-carousel-slides {
-  -webkit-transform: translate(0, 0);
-  -ms-transform: translate(0, 0);
-  transform: translate(0, 0);
-  position: relative;
-  white-space: nowrap;
-  overflow: visible;
-  padding: 0;
-  margin: 0; }
-
-.rn-carousel-slide {
-  white-space: normal;
-  vertical-align: top;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  -webkit-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  backface-visibility: hidden; }
+ul[rn-carousel-transition="hexagon"] {
+  overflow: visible; }
 
 /* indicators */
-.rn-carousel-indicator {
-  width: 100%;
-  text-align: center;
-  height: 20px;
-  background-color: black;
-  background-color: rgba(0, 0, 0, 0.6);
-  position: relative;
-  bottom: 0;
-  cursor: pointer; }
-  .rn-carousel-indicator span {
-    -webkit-transition: color .2s ease-out;
-    transition: color .2s ease-out;
-    padding: 0 5px;
-    color: #333; }
-    .rn-carousel-indicator span:before {
-      content: "\25cf"; }
-    .rn-carousel-indicator span.ng-leave {
-      -webkit-transition: none !important;
-      transition: none !important; }
-  .rn-carousel-indicator .active {
+div[rn-carousel-indicators] span {
+  cursor: pointer;
+  color: #666; }
+  div[rn-carousel-indicators] span.active {
     color: white; }
 
-/* controls */
+/* prev/next controls */
 .rn-carousel-control {
   -webkit-transition: opacity 0.2s ease-out;
   transition: opacity 0.2s ease-out;
-  font-size: 30px;
+  font-size: 2rem;
   position: absolute;
-  top: 50%;
-  margin-top: -35px;
+  top: 40%;
   opacity: 0.75;
   cursor: pointer; }
   .rn-carousel-control:hover {