Home Explore Help
Register Sign In
jamesperet
/
portfolio-go
Watch 1
Star 0
Fork 0

Browse Source
Page slideshow with the Wallop-slider plugin

James Peret 9 years ago
parent
9ed2897930
commit
641f62bf43
11 changed files with 1474 additions and 48 deletions
Show Diff Stats
  1. 10 0
      app/index.html
  2. 2 1
      app/scripts/app.js
  3. 14 28
      app/scripts/controllers/slideshow.js
  4. 65 0
      app/scripts/controllers/test.js
  5. 2 2
      app/scripts/data.json
  6. 121 0
      app/scripts/directives/wallop-slider.js
  7. 30 3
      app/styles/main.css
  8. 1199 0
      app/styles/slider.css
  9. 15 13
      app/views/slideshow.html
  10. 14 0
      app/views/test.html
  11. 2 1
      bower.json

+ 10 - 0
app/index.html
View File 

@@ -7,6 +7,7 @@
7 7 
     <meta name="viewport" content="width=device-width">
8 8
9 9 
 		<link rel="stylesheet" href="styles/main.css">
10 
+    <link rel="stylesheet" href="styles/slider.css">
10 11
11 12 
 		<!-- bower:js -->
12 13 
 
@@ -17,12 +18,18 @@
17 18 
     <script src="../bower_components/angular-route/angular-route.js"></script>
18 19 
     <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
19 20 
     <script src="../bower_components/angular-touch/angular-touch.js"></script>
21 
+
20 22 
 		<script src="../bower_components/famous-angular/dist/famous-angular.js"></script>
21 23 
 		<script src="../bower_components/famous/dist/famous-global.js"></script>
24 
+
25 
+
22 26 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
23 27 
     <script src="../bower_components/ngFx/dist/ngFx.min.js"></script>
28 
+
24 29 
 		<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
25 30
31 
+
32 
+
26 33 
 		<!-- endbower -->
27 34
28 35 
 		<script src="scripts/app.js"></script>
 
@@ -30,8 +37,11 @@
30 37 
     <script src="scripts/controllers/background.js"></script>
31 38 
     <script src="scripts/controllers/navigation.js"></script>
32 39 
     <script src="scripts/controllers/slideshow.js"></script>
40 
+    <script src="scripts/directives/wallop-slider.js"></script>
33 41 
     <script src="scripts/services/data.js"></script>
34 42
43 
+
44 
+
35 45 
 </head>
36 46 
 <body ng-app="goApp">
37 47

+ 2 - 1
app/scripts/app.js
View File 

@@ -22,7 +22,8 @@ angular
22 22 
     'goApp.index',
23 23 
     'goApp.background',
24 24 
     'goApp.navigation',
25 
-    'goApp.slideshow'
25 
+    'goApp.slideshow',
26 
+    'goApp.slider'
26 27 
   ])
27 28
28 29 
   .config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {

+ 14 - 28
app/scripts/controllers/slideshow.js
View File 

@@ -10,6 +10,7 @@
10 10 
 angular.module('goApp.slideshow', ['ngFx', 'ngAnimate', 'goApp.data'])
11 11 
   .controller('SlideshowController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', 'Data', function ($scope,  $rootScope, $famous, $timeline, $location, $route, $timeout, Data) {
12 12
13 
+    // Get Page Data
13 14 
     var link = $location.url()
14 15 
     $scope.pageData = Data.getPageData(link);
15 16 
     $rootScope.$on('data:loaded', function(data) {
 
@@ -19,12 +20,12 @@ angular.module('goApp.slideshow', ['ngFx', 'ngAnimate', 'goApp.data'])
19 20 
         });
20 21 
       }
21 22 
     });
22 
-
23 
+
23 24 
     // FadeIn
24 25 
     $timeout(function(){
25 26 
       $scope.showView = true;
26 27 
     },100);
27 
-
28 
+    // FadeOut
28 29 
     $scope.fadeOut = function() {
29 30 
       $scope.showView = false;
30 31 
       $timeout(function(){
 
@@ -32,34 +33,19 @@ angular.module('goApp.slideshow', ['ngFx', 'ngAnimate', 'goApp.data'])
32 33 
       },500);
33 34 
     }
34 35
35 
-
36 
-    // Moving Cube
37 
-    var Transitionable = $famous['famous/transitions/Transitionable'];
38 
-    var Easing = $famous['famous/transitions/Easing'];
39 
-
40 
-    $scope.t = new Transitionable(0);
41 
-
42 
-    $scope.translation = $timeline([
43 
-      [0, [500, 400, 100], Easing.inOutQuad],
44 
-      [0.25, [400, 200, 100], Easing.inOutQuad],
45 
-      [0.5, [300, 300, 100], Easing.inOutQuad],
46 
-      [0.75, [200, 500, 100], Easing.inOutQuad],
47 
-      [1, [100, 100, 100], Easing.inOutQuad],
48 
-    ]);
49 
-
50 
-    $scope.startAnimations = function(){
51 
-      $scope.t.delay((1000), function(){ // we will delay each animation based on index
52 
-          $scope.t.set(1, {duration: 3400}, function(){
53 
-            // Animation Completion Callback
54 
-          });
55 
-      });
36 
+    $scope.index = 0;
37 
+    $scope.images = [];
38 
+    for (var i = 0; i < $scope.pageData.slides.length; i++) {
39 
+      $scope.images.push($scope.pageData.slides[i].url);
56 40 
     }
57 41
58 
-    //$scope.startAnimations();
59 
-
60 
-
61 42
62 
-    $scope.pageData = Data.getPageData();
63 
-    $scope.startAnimations();
43 
+      // callbacks for change in slides
44 
+      $scope.updateTsPrevious = function() {
45 
+        $scope.tsPrevious = +new Date();
46 
+      };
47 
+      $scope.updateTsNext = function() {
48 
+        $scope.tsNext = +new Date();
49 
+      };
64 50
65 51 
   }]);

+ 65 - 0
app/scripts/controllers/test.js
View File 

@@ -0,0 +1,65 @@
1 
+'use strict';
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name domainManagerApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the domainManagerApp
9 
+ */
10 
+angular.module('goApp.test', ['ngFx', 'ngAnimate', 'goApp.data'])
11 
+  .controller('TestController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', 'Data', function ($scope,  $rootScope, $famous, $timeline, $location, $route, $timeout, Data) {
12 
+
13 
+    var link = $location.url()
14 
+    $scope.pageData = Data.getPageData(link);
15 
+    $rootScope.$on('data:loaded', function(data) {
16 
+      if(!$scope.$$phase) {
17 
+        $scope.$apply(function(){
18 
+          $scope.pageData = Data.getPageData(link);
19 
+        });
20 
+      }
21 
+    });
22 
+
23 
+    // FadeIn
24 
+    $timeout(function(){
25 
+      $scope.showView = true;
26 
+    },100);
27 
+
28 
+    $scope.fadeOut = function() {
29 
+      $scope.showView = false;
30 
+      $timeout(function(){
31 
+        $location.path("/");
32 
+      },500);
33 
+    }
34 
+
35 
+
36 
+    // Moving Cube
37 
+    var Transitionable = $famous['famous/transitions/Transitionable'];
38 
+    var Easing = $famous['famous/transitions/Easing'];
39 
+
40 
+    $scope.t = new Transitionable(0);
41 
+
42 
+    $scope.translation = $timeline([
43 
+      [0, [500, 400, 100], Easing.inOutQuad],
44 
+      [0.25, [400, 200, 100], Easing.inOutQuad],
45 
+      [0.5, [300, 300, 100], Easing.inOutQuad],
46 
+      [0.75, [200, 500, 100], Easing.inOutQuad],
47 
+      [1, [100, 100, 100], Easing.inOutQuad],
48 
+    ]);
49 
+
50 
+    $scope.startAnimations = function(){
51 
+      $scope.t.delay((1000), function(){ // we will delay each animation based on index
52 
+          $scope.t.set(1, {duration: 3400}, function(){
53 
+            // Animation Completion Callback
54 
+          });
55 
+      });
56 
+    }
57 
+
58 
+    //$scope.startAnimations();
59 
+
60 
+
61 
+
62 
+    $scope.pageData = Data.getPageData();
63 
+    $scope.startAnimations();
64 
+
65 
+  }]);

+ 2 - 2
app/scripts/data.json
View File 

@@ -14,11 +14,11 @@
14 14 
           [
15 15 
             {
16 16 
               "title" : "Caligrama 1",
17 
-              "url"   : "/content/images/A3.jpg"
17 
+              "url"   : "content/images/A3.jpg"
18 18 
             },
19 19 
             {
20 20 
               "title" : "Caligrama 2",
21 
-              "url"   : "/content/images/cave-1.jpg"
21 
+              "url"   : "content/images/cave-1.jpg"
22 22 
             }
23 23 
           ]
24 24 
         },

+ 121 - 0
app/scripts/directives/wallop-slider.js
View File 

@@ -0,0 +1,121 @@
1 
+"use strict"
2 
+
3 
+angular.module('goApp.slider', [])
4 
+.directive('wallopSlider', function () {
5 
+    return {
6 
+      template: '<div class="wallop-slider {{animationClass}}"><ul class="wallop-slider__list"><li class="wallop-slider__item {{itemClasses[$index]}}" ng-repeat="i in images"><img src="{{i}}"></li></ul><button ng-show="images.length>1" class="st-button wallop-slider__btn wallop-slider__btn--previous btn btn--previous" ng-disabled="prevDisabled" ng-click="onPrevButtonClicked()">Previous</button><button ng-show="images.length>1" class="st-button wallop-slider__btn wallop-slider__btn--next btn btn--next" ng-disabled="nextDisabled" ng-click="onNextButtonClicked()">Next</button></div>',
7 
+      restrict: 'EA',
8 
+      transclude: true,
9 
+      replace: false,
10 
+      scope: {
11 
+        images: '=',
12 
+        animation: '@',
13 
+        currentItemIndex: '=',
14 
+        onNext: '&',
15 
+        onPrevious: '&'
16 
+      },
17 
+      controller: function($scope, $timeout) {
18 
+
19 
+        $scope.itemClasses = [];
20 
+
21 
+        $scope.$watch('images', function(images) {
22 
+          if (images.length) {
23 
+            _goTo(0);
24 
+          }
25 
+        });
26 
+
27 
+        $scope.$watch('itemClasses', function(itemClasses) {
28 
+          console.log('itemClasses', itemClasses);
29 
+        });
30 
+
31 
+        // set animation class corresponding to animation defined in CSS. e.g. rotate, slide
32 
+        if ($scope.animation) {
33 
+          $scope.animationClass = 'wallop-slider--' + $scope.animation;
34 
+        }
35 
+
36 
+        var _displayOptions = {
37 
+          btnPreviousClass: 'wallop-slider__btn--previous',
38 
+          btnNextClass: 'wallop-slider__btn--next',
39 
+          itemClass: 'wallop-slider__item',
40 
+          currentItemClass: 'wallop-slider__item--current',
41 
+          showPreviousClass: 'wallop-slider__item--show-previous',
42 
+          showNextClass: 'wallop-slider__item--show-next',
43 
+          hidePreviousClass: 'wallop-slider__item--hide-previous',
44 
+          hideNextClass: 'wallop-slider__item--hide-next'
45 
+        };
46 
+
47 
+        function updateClasses() {
48 
+          if ($scope.itemClasses.length !== $scope.images.length) {
49 
+            $scope.itemClasses = [];
50 
+            for (var i=0; i<$scope.images.length; i++) {
51 
+              $scope.itemClasses.push('');
52 
+            }
53 
+          }
54 
+        }
55 
+        function _nextDisabled() {
56 
+          console.log('$scope.currentItemIndex', $scope.currentItemIndex, $scope.images.length);
57 
+
58 
+          return ($scope.currentItemIndex + 1) === $scope.images.length;
59 
+        }
60 
+        function _prevDisabled() {
61 
+          return !$scope.currentItemIndex;
62 
+        }
63 
+        function _updatePagination() {
64 
+          $scope.nextDisabled = _nextDisabled();
65 
+          $scope.prevDisabled = _prevDisabled();
66 
+        }
67 
+        function _clearClasses() {
68 
+          for (var i=0; i<$scope.images.length; i++) {
69 
+            $scope.itemClasses[i] = '';
70 
+          }
71 
+
72 
+        }
73 
+
74 
+        // go to slide
75 
+        function _goTo(index) {
76 
+          console.log('_goTo', index);
77 
+          if (index >= $scope.images.length || index < 0 || index === $scope.currentItemIndex) {
78 
+
79 
+            if (!index) {
80 
+              $scope.itemClasses[0] = _displayOptions.currentItemClass;
81 
+            }
82 
+            return;
83 
+          }
84 
+
85 
+          _clearClasses();
86 
+
87 
+          $scope.itemClasses[$scope.currentItemIndex] = (index > $scope.currentItemIndex) ? _displayOptions.hidePreviousClass : _displayOptions.hideNextClass;
88 
+
89 
+          var currentClass = (index > $scope.currentItemIndex) ? _displayOptions.showNextClass : _displayOptions.showPreviousClass;
90 
+          $scope.itemClasses[index] = _displayOptions.currentItemClass + ' ' + currentClass;
91 
+
92 
+          $scope.currentItemIndex = index;
93 
+
94 
+          _updatePagination();
95 
+
96 
+        }
97 
+
98 
+        // button event handlers
99 
+        // consider using the ng-tap directive to remove delay
100 
+        $scope.onPrevButtonClicked = function () {
101 
+          _goTo($scope.currentItemIndex - 1);
102 
+        };
103 
+        $scope.onNextButtonClicked = function () {
104 
+          _goTo($scope.currentItemIndex + 1);
105 
+        };
106 
+
107 
+        $scope.$watch('currentItemIndex', function(newVal, oldVal) {
108 
+          if (oldVal > newVal) {
109 
+            if (typeof $scope.onPrevious === 'function') {
110 
+              $scope.onPrevious();
111 
+            }
112 
+          } else {
113 
+            if (typeof $scope.onNext === 'function') {
114 
+              $scope.onNext();
115 
+            }
116 
+          }
117 
+        });
118 
+
119 
+      }
120 
+    };
121 
+});

+ 30 - 3
app/styles/main.css
View File 

@@ -26,9 +26,7 @@ body {
26 26 
   z-index: 2;
27 27 
   position: absolute;
28 28 
 }
29 
-ng-view {
30 
-  z-index: 4;
31 
-}
29 
+
32 30 
 .layer-content {
33 31 
   z-index: 3;
34 32 
   position: absolute;
 
@@ -39,6 +37,35 @@ ng-view {
39 37 
   width: 100%;
40 38 
   height: 100%;
41 39 
   background-color: rgba(0,0,0,0.7);
40 
+  overflow: hidden;
41 
+}
42 
+
43 
+.Aligner {
44 
+  display: flex;
45 
+  align-items: center;
46 
+  height: 24em; /* 1 */
47 
+  justify-content: center;
48 
+  height: 100%;
49 
+}
50 
+
51 
+
52 
+.Aligner-item {
53 
+  flex: 1;
54 
+  max-width: 90%;
55 
+  max-height: 90%;
56 
+}
57 
+
58 
+.Aligner-item--top {
59 
+  align-self: flex-start;
60 
+}
61 
+
62 
+.Aligner-item--bottom {
63 
+  align-self: flex-end;
64 
+}
65 
+
66 
+.Aligner-item--fixed {
67 
+  flex: none;
68 
+  max-width: 50%;
42 69 
 }
43 70
44 71 
 .bg-dark { background-color: black;}

+ 1199 - 0
app/styles/slider.css
View File 

@@ -0,0 +1,1199 @@
1 
+* {
2 
+  margin: 0;
3 
+  padding: 0;
4 
+}
5 
+
6 
+
7 
+
8 
+section {
9 
+  text-align: left;
10 
+  padding-bottom: 60px;
11 
+}
12 
+section ul {
13 
+  list-style: inside;
14 
+}
15 
+
16 
+
17 
+.photo-slider {
18 
+  margin-bottom: 20px;
19 
+  display: inline-block;
20 
+  max-width: 612px;
21 
+}
22 
+
23 
+.wallop-slider {
24 
+  position: relative;
25 
+}
26 
+
27 
+.small-slider {
28 
+  max-width: 320px;
29 
+  display: inline-block;
30 
+  vertical-align: top;
31 
+  margin: 10px;
32 
+}
33 
+
34 
+
35 
+@media only screen and (min-width: 480px) {
36 
+  .btn {
37 
+    margin-top: -10px;
38 
+    position: absolute;
39 
+    z-index: 3;
40 
+    top: 50%;
41 
+    opacity: 0;
42 
+    -webkit-transition: opacity 200ms ease;
43 
+    -moz-transition: opacity 200ms ease;
44 
+    -ms-transition: opacity 200ms ease;
45 
+    transition: opacity 200ms ease;
46 
+  }
47 
+  .wallop-slider:hover .btn {
48 
+    opacity: .75;
49 
+  }
50 
+  .wallop-slider:hover .btn:hover {
51 
+    opacity: 1;
52 
+  }
53 
+}
54 
+.btn:hover {
55 
+  cursor: pointer;
56 
+}
57 
+.btn[disabled] {
58 
+  opacity: .4;
59 
+}
60 
+.btn[disabled], .btn[disabled]:hover {
61 
+  cursor: default;
62 
+}
63 
+@media only screen and (min-width: 480px) {
64 
+  .btn[disabled] {
65 
+    visibility: hidden;
66 
+  }
67 
+}
68 
+
69 
+@media only screen and (min-width: 480px) {
70 
+  .btn--previous {
71 
+    left: 10px;
72 
+  }
73 
+}
74 
+
75 
+@media only screen and (min-width: 480px) {
76 
+  .btn--next {
77 
+    right: 10px;
78 
+  }
79 
+}
80 
+
81 
+.goto {
82 
+  padding: 5px;
83 
+}
84 
+
85 
+footer {
86 
+  padding-bottom: 30px;
87 
+}
88 
+
89 
+.wallop-slider {
90 
+  width: 100%;
91 
+}
92 
+
93 
+.wallop-slider__list {
94 
+  list-style: none;
95 
+  position: relative;
96 
+  overflow: hidden;
97 
+}
98 
+
99 
+.wallop-slider__item {
100 
+  display: none;
101 
+  position: absolute;
102 
+  top: 0;
103 
+  left: 0;
104 
+  width: 100%;
105 
+}
106 
+.wallop-slider__item img {
107 
+  display: block;
108 
+  width: 100%;
109 
+}
110 
+
111 
+.wallop-slider__item--current {
112 
+  display: block;
113 
+  position: static;
114 
+}
115 
+
116 
+/*==========  SLIDE CONFIG  ==========*/
117 
+/* the 10ms animation-delay fixed some weird rendering issues with iPhone */
118 
+.wallop-slider--slide .wallop-slider__item--show-previous {
119 
+  -webkit-animation: slideFromLeft 350ms 10ms linear both;
120 
+  -moz-animation: slideFromLeft 350ms 10ms linear both;
121 
+  -ms-animation: slideFromLeft 350ms 10ms linear both;
122 
+  animation: slideFromLeft 350ms 10ms linear both;
123 
+}
124 
+.wallop-slider--slide .wallop-slider__item--show-next {
125 
+  -webkit-animation: slideFromRight 350ms 10ms linear both;
126 
+  -moz-animation: slideFromRight 350ms 10ms linear both;
127 
+  -ms-animation: slideFromRight 350ms 10ms linear both;
128 
+  animation: slideFromRight 350ms 10ms linear both;
129 
+}
130 
+.wallop-slider--slide .wallop-slider__item--hide-previous, .wallop-slider--slide .wallop-slider__item--hide-next {
131 
+  display: block;
132 
+}
133 
+.wallop-slider--slide .wallop-slider__item--hide-previous {
134 
+  -webkit-animation: slideToLeft 350ms 10ms linear both;
135 
+  -moz-animation: slideToLeft 350ms 10ms linear both;
136 
+  -ms-animation: slideToLeft 350ms 10ms linear both;
137 
+  animation: slideToLeft 350ms 10ms linear both;
138 
+}
139 
+.wallop-slider--slide .wallop-slider__item--hide-next {
140 
+  -webkit-animation: slideToRight 350ms 10ms linear both;
141 
+  -moz-animation: slideToRight 350ms 10ms linear both;
142 
+  -ms-animation: slideToRight 350ms 10ms linear both;
143 
+  animation: slideToRight 350ms 10ms linear both;
144 
+}
145 
+
146 
+/*==========  SLIDE ANIMATIONS  ==========*/
147 
+@-webkit-keyframes slideFromLeft {
148 
+  0% {
149 
+    -webkit-transform: translate3d(-100%, 0, 0);
150 
+    -moz-transform: translate3d(-100%, 0, 0);
151 
+    -ms-transform: translate3d(-100%, 0, 0);
152 
+    transform: translate3d(-100%, 0, 0);
153 
+  }
154 
+}
155 
+
156 
+@-moz-keyframes slideFromLeft {
157 
+  0% {
158 
+    -webkit-transform: translate3d(-100%, 0, 0);
159 
+    -moz-transform: translate3d(-100%, 0, 0);
160 
+    -ms-transform: translate3d(-100%, 0, 0);
161 
+    transform: translate3d(-100%, 0, 0);
162 
+  }
163 
+}
164 
+
165 
+@-ms-keyframes slideFromLeft {
166 
+  0% {
167 
+    -webkit-transform: translate3d(-100%, 0, 0);
168 
+    -moz-transform: translate3d(-100%, 0, 0);
169 
+    -ms-transform: translate3d(-100%, 0, 0);
170 
+    transform: translate3d(-100%, 0, 0);
171 
+  }
172 
+}
173 
+
174 
+@keyframes slideFromLeft {
175 
+  0% {
176 
+    -webkit-transform: translate3d(-100%, 0, 0);
177 
+    -moz-transform: translate3d(-100%, 0, 0);
178 
+    -ms-transform: translate3d(-100%, 0, 0);
179 
+    transform: translate3d(-100%, 0, 0);
180 
+  }
181 
+}
182 
+
183 
+@-webkit-keyframes slideFromRight {
184 
+  0% {
185 
+    -webkit-transform: translate3d(100%, 0, 0);
186 
+    -moz-transform: translate3d(100%, 0, 0);
187 
+    -ms-transform: translate3d(100%, 0, 0);
188 
+    transform: translate3d(100%, 0, 0);
189 
+  }
190 
+}
191 
+
192 
+@-moz-keyframes slideFromRight {
193 
+  0% {
194 
+    -webkit-transform: translate3d(100%, 0, 0);
195 
+    -moz-transform: translate3d(100%, 0, 0);
196 
+    -ms-transform: translate3d(100%, 0, 0);
197 
+    transform: translate3d(100%, 0, 0);
198 
+  }
199 
+}
200 
+
201 
+@-ms-keyframes slideFromRight {
202 
+  0% {
203 
+    -webkit-transform: translate3d(100%, 0, 0);
204 
+    -moz-transform: translate3d(100%, 0, 0);
205 
+    -ms-transform: translate3d(100%, 0, 0);
206 
+    transform: translate3d(100%, 0, 0);
207 
+  }
208 
+}
209 
+
210 
+@keyframes slideFromRight {
211 
+  0% {
212 
+    -webkit-transform: translate3d(100%, 0, 0);
213 
+    -moz-transform: translate3d(100%, 0, 0);
214 
+    -ms-transform: translate3d(100%, 0, 0);
215 
+    transform: translate3d(100%, 0, 0);
216 
+  }
217 
+}
218 
+
219 
+@-webkit-keyframes slideToLeft {
220 
+  99% {
221 
+    opacity: 1;
222 
+  }
223 
+
224 
+  100% {
225 
+    opacity: 0;
226 
+    -webkit-transform: translate3d(-100%, 0, 0);
227 
+    -moz-transform: translate3d(-100%, 0, 0);
228 
+    -ms-transform: translate3d(-100%, 0, 0);
229 
+    transform: translate3d(-100%, 0, 0);
230 
+  }
231 
+}
232 
+
233 
+@-moz-keyframes slideToLeft {
234 
+  99% {
235 
+    opacity: 1;
236 
+  }
237 
+
238 
+  100% {
239 
+    opacity: 0;
240 
+    -webkit-transform: translate3d(-100%, 0, 0);
241 
+    -moz-transform: translate3d(-100%, 0, 0);
242 
+    -ms-transform: translate3d(-100%, 0, 0);
243 
+    transform: translate3d(-100%, 0, 0);
244 
+  }
245 
+}
246 
+
247 
+@-ms-keyframes slideToLeft {
248 
+  99% {
249 
+    opacity: 1;
250 
+  }
251 
+
252 
+  100% {
253 
+    opacity: 0;
254 
+    -webkit-transform: translate3d(-100%, 0, 0);
255 
+    -moz-transform: translate3d(-100%, 0, 0);
256 
+    -ms-transform: translate3d(-100%, 0, 0);
257 
+    transform: translate3d(-100%, 0, 0);
258 
+  }
259 
+}
260 
+
261 
+@keyframes slideToLeft {
262 
+  99% {
263 
+    opacity: 1;
264 
+  }
265 
+
266 
+  100% {
267 
+    opacity: 0;
268 
+    -webkit-transform: translate3d(-100%, 0, 0);
269 
+    -moz-transform: translate3d(-100%, 0, 0);
270 
+    -ms-transform: translate3d(-100%, 0, 0);
271 
+    transform: translate3d(-100%, 0, 0);
272 
+  }
273 
+}
274 
+
275 
+@-webkit-keyframes slideToRight {
276 
+  99% {
277 
+    opacity: 1;
278 
+  }
279 
+
280 
+  100% {
281 
+    opacity: 0;
282 
+    -webkit-transform: translate3d(100%, 0, 0);
283 
+    -moz-transform: translate3d(100%, 0, 0);
284 
+    -ms-transform: translate3d(100%, 0, 0);
285 
+    transform: translate3d(100%, 0, 0);
286 
+  }
287 
+}
288 
+
289 
+@-moz-keyframes slideToRight {
290 
+  99% {
291 
+    opacity: 1;
292 
+  }
293 
+
294 
+  100% {
295 
+    opacity: 0;
296 
+    -webkit-transform: translate3d(100%, 0, 0);
297 
+    -moz-transform: translate3d(100%, 0, 0);
298 
+    -ms-transform: translate3d(100%, 0, 0);
299 
+    transform: translate3d(100%, 0, 0);
300 
+  }
301 
+}
302 
+
303 
+@-ms-keyframes slideToRight {
304 
+  99% {
305 
+    opacity: 1;
306 
+  }
307 
+
308 
+  100% {
309 
+    opacity: 0;
310 
+    -webkit-transform: translate3d(100%, 0, 0);
311 
+    -moz-transform: translate3d(100%, 0, 0);
312 
+    -ms-transform: translate3d(100%, 0, 0);
313 
+    transform: translate3d(100%, 0, 0);
314 
+  }
315 
+}
316 
+
317 
+@keyframes slideToRight {
318 
+  99% {
319 
+    opacity: 1;
320 
+  }
321 
+
322 
+  100% {
323 
+    opacity: 0;
324 
+    -webkit-transform: translate3d(100%, 0, 0);
325 
+    -moz-transform: translate3d(100%, 0, 0);
326 
+    -ms-transform: translate3d(100%, 0, 0);
327 
+    transform: translate3d(100%, 0, 0);
328 
+  }
329 
+}
330 
+
331 
+/*==========  VERTICAL SLIDE CONFIG  ==========*/
332 
+.wallop-slider--vertical-slide {
333 
+  /* the 10ms animation-delay fixed some weird rendering issues with iPhone */
334 
+}
335 
+.wallop-slider--vertical-slide .wallop-slider__list {
336 
+  position: relative;
337 
+  overflow: hidden;
338 
+}
339 
+.wallop-slider--vertical-slide .wallop-slider__item--show-next {
340 
+  -webkit-animation: slideFromTop 350ms 10ms linear both;
341 
+  -moz-animation: slideFromTop 350ms 10ms linear both;
342 
+  -ms-animation: slideFromTop 350ms 10ms linear both;
343 
+  animation: slideFromTop 350ms 10ms linear both;
344 
+}
345 
+.wallop-slider--vertical-slide .wallop-slider__item--show-previous {
346 
+  -webkit-animation: slideFromBottom 350ms 10ms linear both;
347 
+  -moz-animation: slideFromBottom 350ms 10ms linear both;
348 
+  -ms-animation: slideFromBottom 350ms 10ms linear both;
349 
+  animation: slideFromBottom 350ms 10ms linear both;
350 
+}
351 
+.wallop-slider--vertical-slide .wallop-slider__item--hide-previous,
352 
+.wallop-slider--vertical-slide .wallop-slider__item--hide-next {
353 
+  display: block;
354 
+}
355 
+.wallop-slider--vertical-slide .wallop-slider__item--hide-previous {
356 
+  -webkit-animation: slideToBottom 350ms 10ms linear both;
357 
+  -moz-animation: slideToBottom 350ms 10ms linear both;
358 
+  -ms-animation: slideToBottom 350ms 10ms linear both;
359 
+  animation: slideToBottom 350ms 10ms linear both;
360 
+}
361 
+.wallop-slider--vertical-slide .wallop-slider__item--hide-next {
362 
+  -webkit-animation: slideToTop 350ms 10ms linear both;
363 
+  -moz-animation: slideToTop 350ms 10ms linear both;
364 
+  -ms-animation: slideToTop 350ms 10ms linear both;
365 
+  animation: slideToTop 350ms 10ms linear both;
366 
+}
367 
+
368 
+/*==========  VERTICAL SLIDE ANIMATIONS  ==========*/
369 
+@-webkit-keyframes slideFromTop {
370 
+  0% {
371 
+    -webkit-transform: translate3d(0, -100%, 0);
372 
+    -moz-transform: translate3d(0, -100%, 0);
373 
+    -ms-transform: translate3d(0, -100%, 0);
374 
+    transform: translate3d(0, -100%, 0);
375 
+  }
376 
+}
377 
+
378 
+@-moz-keyframes slideFromTop {
379 
+  0% {
380 
+    -webkit-transform: translate3d(0, -100%, 0);
381 
+    -moz-transform: translate3d(0, -100%, 0);
382 
+    -ms-transform: translate3d(0, -100%, 0);
383 
+    transform: translate3d(0, -100%, 0);
384 
+  }
385 
+}
386 
+
387 
+@-ms-keyframes slideFromTop {
388 
+  0% {
389 
+    -webkit-transform: translate3d(0, -100%, 0);
390 
+    -moz-transform: translate3d(0, -100%, 0);
391 
+    -ms-transform: translate3d(0, -100%, 0);
392 
+    transform: translate3d(0, -100%, 0);
393 
+  }
394 
+}
395 
+
396 
+@keyframes slideFromTop {
397 
+  0% {
398 
+    -webkit-transform: translate3d(0, -100%, 0);
399 
+    -moz-transform: translate3d(0, -100%, 0);
400 
+    -ms-transform: translate3d(0, -100%, 0);
401 
+    transform: translate3d(0, -100%, 0);
402 
+  }
403 
+}
404 
+
405 
+@-webkit-keyframes slideFromBottom {
406 
+  0% {
407 
+    -webkit-transform: translate3d(0, 100%, 0);
408 
+    -moz-transform: translate3d(0, 100%, 0);
409 
+    -ms-transform: translate3d(0, 100%, 0);
410 
+    transform: translate3d(0, 100%, 0);
411 
+  }
412 
+}
413 
+
414 
+@-moz-keyframes slideFromBottom {
415 
+  0% {
416 
+    -webkit-transform: translate3d(0, 100%, 0);
417 
+    -moz-transform: translate3d(0, 100%, 0);
418 
+    -ms-transform: translate3d(0, 100%, 0);
419 
+    transform: translate3d(0, 100%, 0);
420 
+  }
421 
+}
422 
+
423 
+@-ms-keyframes slideFromBottom {
424 
+  0% {
425 
+    -webkit-transform: translate3d(0, 100%, 0);
426 
+    -moz-transform: translate3d(0, 100%, 0);
427 
+    -ms-transform: translate3d(0, 100%, 0);
428 
+    transform: translate3d(0, 100%, 0);
429 
+  }
430 
+}
431 
+
432 
+@keyframes slideFromBottom {
433 
+  0% {
434 
+    -webkit-transform: translate3d(0, 100%, 0);
435 
+    -moz-transform: translate3d(0, 100%, 0);
436 
+    -ms-transform: translate3d(0, 100%, 0);
437 
+    transform: translate3d(0, 100%, 0);
438 
+  }
439 
+}
440 
+
441 
+@-webkit-keyframes slideToTop {
442 
+  99% {
443 
+    opacity: 1;
444 
+  }
445 
+
446 
+  100% {
447 
+    -webkit-transform: translate3d(0, -100%, 0);
448 
+    -moz-transform: translate3d(0, -100%, 0);
449 
+    -ms-transform: translate3d(0, -100%, 0);
450 
+    transform: translate3d(0, -100%, 0);
451 
+    opacity: 0;
452 
+  }
453 
+}
454 
+
455 
+@-moz-keyframes slideToTop {
456 
+  99% {
457 
+    opacity: 1;
458 
+  }
459 
+
460 
+  100% {
461 
+    -webkit-transform: translate3d(0, -100%, 0);
462 
+    -moz-transform: translate3d(0, -100%, 0);
463 
+    -ms-transform: translate3d(0, -100%, 0);
464 
+    transform: translate3d(0, -100%, 0);
465 
+    opacity: 0;
466 
+  }
467 
+}
468 
+
469 
+@-ms-keyframes slideToTop {
470 
+  99% {
471 
+    opacity: 1;
472 
+  }
473 
+
474 
+  100% {
475 
+    -webkit-transform: translate3d(0, -100%, 0);
476 
+    -moz-transform: translate3d(0, -100%, 0);
477 
+    -ms-transform: translate3d(0, -100%, 0);
478 
+    transform: translate3d(0, -100%, 0);
479 
+    opacity: 0;
480 
+  }
481 
+}
482 
+
483 
+@keyframes slideToTop {
484 
+  99% {
485 
+    opacity: 1;
486 
+  }
487 
+
488 
+  100% {
489 
+    -webkit-transform: translate3d(0, -100%, 0);
490 
+    -moz-transform: translate3d(0, -100%, 0);
491 
+    -ms-transform: translate3d(0, -100%, 0);
492 
+    transform: translate3d(0, -100%, 0);
493 
+    opacity: 0;
494 
+  }
495 
+}
496 
+
497 
+@-webkit-keyframes slideToBottom {
498 
+  99% {
499 
+    opacity: 1;
500 
+  }
501 
+
502 
+  100% {
503 
+    -webkit-transform: translate3d(0, 100%, 0);
504 
+    -moz-transform: translate3d(0, 100%, 0);
505 
+    -ms-transform: translate3d(0, 100%, 0);
506 
+    transform: translate3d(0, 100%, 0);
507 
+    opacity: 0;
508 
+  }
509 
+}
510 
+
511 
+@-moz-keyframes slideToBottom {
512 
+  99% {
513 
+    opacity: 1;
514 
+  }
515 
+
516 
+  100% {
517 
+    -webkit-transform: translate3d(0, 100%, 0);
518 
+    -moz-transform: translate3d(0, 100%, 0);
519 
+    -ms-transform: translate3d(0, 100%, 0);
520 
+    transform: translate3d(0, 100%, 0);
521 
+    opacity: 0;
522 
+  }
523 
+}
524 
+
525 
+@-ms-keyframes slideToBottom {
526 
+  99% {
527 
+    opacity: 1;
528 
+  }
529 
+
530 
+  100% {
531 
+    -webkit-transform: translate3d(0, 100%, 0);
532 
+    -moz-transform: translate3d(0, 100%, 0);
533 
+    -ms-transform: translate3d(0, 100%, 0);
534 
+    transform: translate3d(0, 100%, 0);
535 
+    opacity: 0;
536 
+  }
537 
+}
538 
+
539 
+@keyframes slideToBottom {
540 
+  99% {
541 
+    opacity: 1;
542 
+  }
543 
+
544 
+  100% {
545 
+    -webkit-transform: translate3d(0, 100%, 0);
546 
+    -moz-transform: translate3d(0, 100%, 0);
547 
+    -ms-transform: translate3d(0, 100%, 0);
548 
+    transform: translate3d(0, 100%, 0);
549 
+    opacity: 0;
550 
+  }
551 
+}
552 
+
553 
+/*==========  FADE CONFIG  ==========*/
554 
+.wallop-slider--fade .wallop-slider__item--hide-previous,
555 
+.wallop-slider--fade .wallop-slider__item--hide-next {
556 
+  display: block;
557 
+  -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
558 
+  -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
559 
+  -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
560 
+  animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
561 
+}
562 
+
563 
+/*==========  FADE ANIMATIONS  ==========*/
564 
+@-webkit-keyframes fadeOut {
565 
+  100% {
566 
+    opacity: 0;
567 
+  }
568 
+}
569 
+
570 
+@-moz-keyframes fadeOut {
571 
+  100% {
572 
+    opacity: 0;
573 
+  }
574 
+}
575 
+
576 
+@-ms-keyframes fadeOut {
577 
+  100% {
578 
+    opacity: 0;
579 
+  }
580 
+}
581 
+
582 
+@keyframes fadeOut {
583 
+  100% {
584 
+    opacity: 0;
585 
+  }
586 
+}
587 
+
588 
+/*==========  FOLD CONFIG  ==========*/
589 
+.wallop-slider--fold .wallop-slider__list {
590 
+  -webkit-perspective: 1000;
591 
+  -moz-perspective: 1000;
592 
+  -ms-perspective: 1000;
593 
+  perspective: 1000;
594 
+}
595 
+.wallop-slider--fold .wallop-slider__item--current {
596 
+  position: relative;
597 
+}
598 
+.wallop-slider--fold .wallop-slider__item--show-previous {
599 
+  -webkit-transform: translateZ(0);
600 
+  -moz-transform: translateZ(0);
601 
+  -ms-transform: translateZ(0);
602 
+  transform: translateZ(0);
603 
+  -webkit-transform-origin: center left;
604 
+  -moz-transform-origin: center left;
605 
+  -ms-transform-origin: center left;
606 
+  transform-origin: center left;
607 
+  -webkit-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
608 
+  -moz-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
609 
+  -ms-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
610 
+  animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
611 
+  z-index: 2;
612 
+}
613 
+.wallop-slider--fold .wallop-slider__item--show-next {
614 
+  -webkit-transform: translateZ(0);
615 
+  -moz-transform: translateZ(0);
616 
+  -ms-transform: translateZ(0);
617 
+  transform: translateZ(0);
618 
+  -webkit-transform-origin: center right;
619 
+  -moz-transform-origin: center right;
620 
+  -ms-transform-origin: center right;
621 
+  transform-origin: center right;
622 
+  -webkit-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
623 
+  -moz-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
624 
+  -ms-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
625 
+  animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
626 
+  z-index: 1;
627 
+}
628 
+.wallop-slider--fold .wallop-slider__item--hide-previous,
629 
+.wallop-slider--fold .wallop-slider__item--hide-next {
630 
+  display: block;
631 
+}
632 
+
633 
+/*==========  FOLD ANIMATIONS  ==========*/
634 
+@-webkit-keyframes foldFromLeft {
635 
+  0% {
636 
+    -webkit-transform: rotateY(-90deg);
637 
+    -moz-transform: rotateY(-90deg);
638 
+    -ms-transform: rotateY(-90deg);
639 
+    transform: rotateY(-90deg);
640 
+  }
641 
+}
642 
+
643 
+@-moz-keyframes foldFromLeft {
644 
+  0% {
645 
+    -webkit-transform: rotateY(-90deg);
646 
+    -moz-transform: rotateY(-90deg);
647 
+    -ms-transform: rotateY(-90deg);
648 
+    transform: rotateY(-90deg);
649 
+  }
650 
+}
651 
+
652 
+@-ms-keyframes foldFromLeft {
653 
+  0% {
654 
+    -webkit-transform: rotateY(-90deg);
655 
+    -moz-transform: rotateY(-90deg);
656 
+    -ms-transform: rotateY(-90deg);
657 
+    transform: rotateY(-90deg);
658 
+  }
659 
+}
660 
+
661 
+@keyframes foldFromLeft {
662 
+  0% {
663 
+    -webkit-transform: rotateY(-90deg);
664 
+    -moz-transform: rotateY(-90deg);
665 
+    -ms-transform: rotateY(-90deg);
666 
+    transform: rotateY(-90deg);
667 
+  }
668 
+}
669 
+
670 
+@-webkit-keyframes foldFromRight {
671 
+  0% {
672 
+    -webkit-transform: rotateY(90deg);
673 
+    -moz-transform: rotateY(90deg);
674 
+    -ms-transform: rotateY(90deg);
675 
+    transform: rotateY(90deg);
676 
+  }
677 
+}
678 
+
679 
+@-moz-keyframes foldFromRight {
680 
+  0% {
681 
+    -webkit-transform: rotateY(90deg);
682 
+    -moz-transform: rotateY(90deg);
683 
+    -ms-transform: rotateY(90deg);
684 
+    transform: rotateY(90deg);
685 
+  }
686 
+}
687 
+
688 
+@-ms-keyframes foldFromRight {
689 
+  0% {
690 
+    -webkit-transform: rotateY(90deg);
691 
+    -moz-transform: rotateY(90deg);
692 
+    -ms-transform: rotateY(90deg);
693 
+    transform: rotateY(90deg);
694 
+  }
695 
+}
696 
+
697 
+@keyframes foldFromRight {
698 
+  0% {
699 
+    -webkit-transform: rotateY(90deg);
700 
+    -moz-transform: rotateY(90deg);
701 
+    -ms-transform: rotateY(90deg);
702 
+    transform: rotateY(90deg);
703 
+  }
704 
+}
705 
+
706 
+/*==========  SCALE CONFIG  ==========*/
707 
+.wallop-slider--scale .wallop-slider__item--hide-previous,
708 
+.wallop-slider--scale .wallop-slider__item--hide-next {
709 
+  display: block;
710 
+  -webkit-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
711 
+  -moz-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
712 
+  -ms-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
713 
+  animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
714 
+}
715 
+
716 
+/*==========  SCALE ANIMATIONS  ==========*/
717 
+@-webkit-keyframes scaleOut {
718 
+  100% {
719 
+    -webkit-transform: scale(1.6);
720 
+    -moz-transform: scale(1.6);
721 
+    -ms-transform: scale(1.6);
722 
+    transform: scale(1.6);
723 
+    opacity: 0;
724 
+  }
725 
+}
726 
+
727 
+@-moz-keyframes scaleOut {
728 
+  100% {
729 
+    -webkit-transform: scale(1.6);
730 
+    -moz-transform: scale(1.6);
731 
+    -ms-transform: scale(1.6);
732 
+    transform: scale(1.6);
733 
+    opacity: 0;
734 
+  }
735 
+}
736 
+
737 
+@-ms-keyframes scaleOut {
738 
+  100% {
739 
+    -webkit-transform: scale(1.6);
740 
+    -moz-transform: scale(1.6);
741 
+    -ms-transform: scale(1.6);
742 
+    transform: scale(1.6);
743 
+    opacity: 0;
744 
+  }
745 
+}
746 
+
747 
+@keyframes scaleOut {
748 
+  100% {
749 
+    -webkit-transform: scale(1.6);
750 
+    -moz-transform: scale(1.6);
751 
+    -ms-transform: scale(1.6);
752 
+    transform: scale(1.6);
753 
+    opacity: 0;
754 
+  }
755 
+}
756 
+
757 
+/*==========  SPECIAL CONFIG  ==========*/
758 
+.wallop-slider--rotate .wallop-slider__item--hide-previous,
759 
+.wallop-slider--rotate .wallop-slider__item--hide-next {
760 
+  display: block;
761 
+}
762 
+.wallop-slider--rotate .wallop-slider__item--hide-previous {
763 
+  -webkit-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
764 
+  -moz-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
765 
+  -ms-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
766 
+  animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
767 
+}
768 
+.wallop-slider--rotate .wallop-slider__item--hide-next {
769 
+  -webkit-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
770 
+  -moz-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
771 
+  -ms-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
772 
+  animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
773 
+}
774 
+
775 
+/*==========  SPCECIAL ANIMATIONS  ==========*/
776 
+@-webkit-keyframes rotateToLeft {
777 
+  99% {
778 
+    opacity: 1;
779 
+  }
780 
+
781 
+  100% {
782 
+    opacity: 0;
783 
+    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
784 
+    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
785 
+    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
786 
+    transform: translate3d(-100%, 0, 0) rotate(90deg);
787 
+  }
788 
+}
789 
+
790 
+@-moz-keyframes rotateToLeft {
791 
+  99% {
792 
+    opacity: 1;
793 
+  }
794 
+
795 
+  100% {
796 
+    opacity: 0;
797 
+    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
798 
+    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
799 
+    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
800 
+    transform: translate3d(-100%, 0, 0) rotate(90deg);
801 
+  }
802 
+}
803 
+
804 
+@-ms-keyframes rotateToLeft {
805 
+  99% {
806 
+    opacity: 1;
807 
+  }
808 
+
809 
+  100% {
810 
+    opacity: 0;
811 
+    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
812 
+    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
813 
+    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
814 
+    transform: translate3d(-100%, 0, 0) rotate(90deg);
815 
+  }
816 
+}
817 
+
818 
+@keyframes rotateToLeft {
819 
+  99% {
820 
+    opacity: 1;
821 
+  }
822 
+
823 
+  100% {
824 
+    opacity: 0;
825 
+    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
826 
+    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
827 
+    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
828 
+    transform: translate3d(-100%, 0, 0) rotate(90deg);
829 
+  }
830 
+}
831 
+
832 
+@-webkit-keyframes rotateToRight {
833 
+  99% {
834 
+    opacity: 1;
835 
+  }
836 
+
837 
+  100% {
838 
+    opacity: 0;
839 
+    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
840 
+    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
841 
+    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
842 
+    transform: translate3d(100%, 0, 0) rotate(-90deg);
843 
+  }
844 
+}
845 
+
846 
+@-moz-keyframes rotateToRight {
847 
+  99% {
848 
+    opacity: 1;
849 
+  }
850 
+
851 
+  100% {
852 
+    opacity: 0;
853 
+    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
854 
+    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
855 
+    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
856 
+    transform: translate3d(100%, 0, 0) rotate(-90deg);
857 
+  }
858 
+}
859 
+
860 
+@-ms-keyframes rotateToRight {
861 
+  99% {
862 
+    opacity: 1;
863 
+  }
864 
+
865 
+  100% {
866 
+    opacity: 0;
867 
+    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
868 
+    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
869 
+    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
870 
+    transform: translate3d(100%, 0, 0) rotate(-90deg);
871 
+  }
872 
+}
873 
+
874 
+@keyframes rotateToRight {
875 
+  99% {
876 
+    opacity: 1;
877 
+  }
878 
+
879 
+  100% {
880 
+    opacity: 0;
881 
+    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
882 
+    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
883 
+    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
884 
+    transform: translate3d(100%, 0, 0) rotate(-90deg);
885 
+  }
886 
+}
887 
+
888 
+@media only screen and (min-width: 480px) {
889 
+  .wallop-slider--targeted .wallop-slider__item--hide-previous,
890 
+  .wallop-slider--targeted .wallop-slider__item--hide-next {
891 
+    display: block;
892 
+    -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
893 
+    -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
894 
+    -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
895 
+    animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
896 
+  }
897 
+}
898 
+
899 
+/*==========  FADE ANIMATIONS  ==========*/
900 
+@-webkit-keyframes fadeOut {
901 
+  100% {
902 
+    opacity: 0;
903 
+  }
904 
+}
905 
+
906 
+@-moz-keyframes fadeOut {
907 
+  100% {
908 
+    opacity: 0;
909 
+  }
910 
+}
911 
+
912 
+@-ms-keyframes fadeOut {
913 
+  100% {
914 
+    opacity: 0;
915 
+  }
916 
+}
917 
+
918 
+@keyframes fadeOut {
919 
+  100% {
920 
+    opacity: 0;
921 
+  }
922 
+}
923 
+
924 
+/*==========  EXPERIMENTAL CONFIG  ==========*/
925 
+.wallop-slider--experimental .wallop-slider__list {
926 
+  overflow: visible;
927 
+  -webkit-perspective: 1000;
928 
+}
929 
+.wallop-slider--experimental .wallop-slider__item {
930 
+  -webkit-transition: all 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
931 
+  -webkit-transform: translateZ(0);
932 
+}
933 
+.wallop-slider--experimental .wallop-slider__item--current {
934 
+  position: relative;
935 
+}
936 
+.wallop-slider--experimental .wallop-slider__item--current + .wallop-slider__item,
937 
+.wallop-slider--experimental .wallop-slider__item--hide-next {
938 
+  display: block;
939 
+  -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg);
940 
+  -webkit-transform-origin: left center;
941 
+}
942 
+.wallop-slider--experimental .wallop-slider__item--before-current {
943 
+  display: block;
944 
+  -webkit-transform: translate3d(-100%, 0, 0) rotateY(18deg);
945 
+  -webkit-transform-origin: right center;
946 
+}
947 
+.wallop-slider--experimental .wallop-slider__item--before-before {
948 
+  display: block;
949 
+  -webkit-transform: translate3d(-200%, 0, 0) rotateY(18deg);
950 
+  -webkit-transform-origin: right center;
951 
+}
952 
+.wallop-slider--experimental .wallop-slider__item--hide-next + .wallop-slider__item {
953 
+  display: block;
954 
+  -webkit-transform-origin: left center;
955 
+}
956 
+.wallop-slider--experimental .wallop-slider__item--show-next + .wallop-slider__item {
957 
+  display: block;
958 
+  -webkit-animation: showNext 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
959 
+  -webkit-transform-origin: left center;
960 
+}
961 
+.wallop-slider--experimental .wallop-slider__item--hide-next + .wallop-slider__item {
962 
+  display: block;
963 
+  -webkit-animation: hideNext 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
964 
+  -webkit-transform-origin: left center;
965 
+}
966 
+.wallop-slider--experimental .wallop-slider__item--hide-previous {
967 
+  -webkit-transform: translate3d(-100%, 0, 0) rotateY(18deg);
968 
+  -webkit-transform-origin: right center;
969 
+}
970 
+
971 
+/*==========  EXPERIMENTAL ANIMATIONS  ==========*/
972 
+@-webkit-keyframes showNext {
973 
+  0% {
974 
+    -webkit-transform: translate3d(200%, 0, 0);
975 
+  }
976 
+
977 
+  100% {
978 
+    -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg);
979 
+  }
980 
+}
981 
+
982 
+@-webkit-keyframes hideNext {
983 
+  0% {
984 
+    -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg);
985 
+  }
986 
+
987 
+  100% {
988 
+    -webkit-transform: translate3d(200%, 0, 0) rotateY(-18deg);
989 
+  }
990 
+}
991 
+
992 
+/**
993 
+ * prism.js Twilight theme
994 
+ * Based (more or less) on the Twilight theme originally of Textmate fame.
995 
+ * @author Remy Bach
996 
+ */
997 
+code[class*="language-"],
998 
+pre[class*="language-"] {
999 
+  color: white;
1000 
+  direction: ltr;
1001 
+  font-family: Consolas, Monaco, 'Andale Mono', monospace;
1002 
+  text-align: left;
1003 
+  white-space: pre;
1004 
+  word-spacing: normal;
1005 
+  -moz-tab-size: 4;
1006 
+  -o-tab-size: 4;
1007 
+  tab-size: 4;
1008 
+  font-size: 18px;
1009 
+  -webkit-hyphens: none;
1010 
+  -moz-hyphens: none;
1011 
+  -ms-hyphens: none;
1012 
+  hyphens: none;
1013 
+}
1014 
+
1015 
+pre[class*="language-"],
1016 
+:not(pre) > code[class*="language-"] {
1017 
+  background: #141414;
1018 
+  /* #141414 */
1019 
+}
1020 
+
1021 
+/* Code blocks */
1022 
+pre[class*="language-"] {
1023 
+  margin: .5em 0;
1024 
+  overflow: auto;
1025 
+  padding: 1em;
1026 
+}
1027 
+
1028 
+pre[class*="language-"]::selection {
1029 
+  /* Safari */
1030 
+  background: #27292a;
1031 
+  /* #282A2B */
1032 
+}
1033 
+
1034 
+pre[class*="language-"]::selection {
1035 
+  /* Firefox */
1036 
+  background: #27292a;
1037 
+  /* #282A2B */
1038 
+}
1039 
+
1040 
+/* Text Selection colour */
1041 
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
1042 
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
1043 
+  text-shadow: none;
1044 
+  background: rgba(237, 237, 237, 0.15);
1045 
+  /* #EDEDED */
1046 
+}
1047 
+
1048 
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
1049 
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
1050 
+  text-shadow: none;
1051 
+  background: rgba(237, 237, 237, 0.15);
1052 
+  /* #EDEDED */
1053 
+}
1054 
+
1055 
+/* Inline code */
1056 
+:not(pre) > code[class*="language-"] {
1057 
+  border-radius: .3em;
1058 
+  border: 0.13em solid #545454;
1059 
+  /* #545454 */
1060 
+  box-shadow: 1px 1px 0.3em -0.1em black inset;
1061 
+  padding: .15em .2em .05em;
1062 
+}
1063 
+
1064 
+.token.comment,
1065 
+.token.prolog,
1066 
+.token.doctype,
1067 
+.token.cdata {
1068 
+  color: #787878;
1069 
+  /* #777777 */
1070 
+}
1071 
+
1072 
+.token.punctuation {
1073 
+  opacity: .7;
1074 
+}
1075 
+
1076 
+.namespace {
1077 
+  opacity: .7;
1078 
+}
1079 
+
1080 
+.token.tag,
1081 
+.token.boolean,
1082 
+.token.number {
1083 
+  color: #cf694a;
1084 
+  /* #CF6A4C */
1085 
+}
1086 
+
1087 
+.token.keyword,
1088 
+.token.property,
1089 
+.token.selector,
1090 
+.token.constant,
1091 
+.token.symbol,
1092 
+.token.builtin {
1093 
+  color: #f9ee9a;
1094 
+  /* #F9EE98 */
1095 
+}
1096 
+
1097 
+.token.attr-name,
1098 
+.token.attr-value,
1099 
+.token.string,
1100 
+.token.operator,
1101 
+.token.entity,
1102 
+.token.url,
1103 
+.language-css .token.string,
1104 
+.style .token.string,
1105 
+.token.variable {
1106 
+  color: #919e6b;
1107 
+  /* #8F9D6A */
1108 
+}
1109 
+
1110 
+.token.atrule {
1111 
+  color: #7386a5;
1112 
+  /* #7587A6 */
1113 
+}
1114 
+
1115 
+.token.regex,
1116 
+.token.important {
1117 
+  color: #e9c163;
1118 
+  /* #E9C062 */
1119 
+}
1120 
+
1121 
+.token.important {
1122 
+  font-weight: bold;
1123 
+}
1124 
+
1125 
+.token.entity {
1126 
+  cursor: help;
1127 
+}
1128 
+
1129 
+pre[data-line] {
1130 
+  padding: 1em 0 1em 3em;
1131 
+  position: relative;
1132 
+}
1133 
+
1134 
+/* Markup */
1135 
+.language-markup .token.tag,
1136 
+.language-markup .token.attr-name,
1137 
+.language-markup .token.punctuation {
1138 
+  color: #ad895c;
1139 
+  /* #AC885B */
1140 
+}
1141 
+
1142 
+/* Make the tokens sit above the line highlight so the colours don't look faded. */
1143 
+.token {
1144 
+  position: relative;
1145 
+  z-index: 1;
1146 
+}
1147 
+
1148 
+.line-highlight {
1149 
+  background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
1150 
+  /* #545454 */
1151 
+  background: -o-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
1152 
+  /* #545454 */
1153 
+  background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
1154 
+  /* #545454 */
1155 
+  background: rgba(84, 84, 84, 0.25);
1156 
+  /* #545454 */
1157 
+  background: linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
1158 
+  /* #545454 */
1159 
+  border-bottom: 1px dashed #545454;
1160 
+  /* #545454 */
1161 
+  border-top: 1px dashed #545454;
1162 
+  /* #545454 */
1163 
+  left: 0;
1164 
+  line-height: inherit;
1165 
+  margin-top: 0.75em;
1166 
+  /* Same as .prism’s padding-top */
1167 
+  padding: inherit 0;
1168 
+  pointer-events: none;
1169 
+  position: absolute;
1170 
+  right: 0;
1171 
+  white-space: pre;
1172 
+  z-index: 0;
1173 
+}
1174 
+
1175 
+.line-highlight:before,
1176 
+.line-highlight[data-end]:after {
1177 
+  background-color: #8794a6;
1178 
+  /* #8794A6 */
1179 
+  border-radius: 999px;
1180 
+  box-shadow: 0 1px white;
1181 
+  color: #f5f2f0;
1182 
+  /* #F5F2F0 */
1183 
+  content: attr(data-start);
1184 
+  font: bold 65%/1.5 sans-serif;
1185 
+  left: .6em;
1186 
+  min-width: 1em;
1187 
+  padding: 0 .5em;
1188 
+  position: absolute;
1189 
+  text-align: center;
1190 
+  text-shadow: none;
1191 
+  top: .4em;
1192 
+  vertical-align: .3em;
1193 
+}
1194 
+
1195 
+.line-highlight[data-end]:after {
1196 
+  bottom: .4em;
1197 
+  content: attr(data-end);
1198 
+  top: auto;
1199 
+}

+ 15 - 13
app/views/slideshow.html
View File 

@@ -1,14 +1,16 @@
1 
-<div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView" ng-click="fadeOut()">
2 
-  <fa-app id="app2">
3 
-  <fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]" fa-index="1">
4 
-    <ui-view style="position: absolute; z-index: 2;">
5 
-        <fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" >
6 
-            <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'" >
7 
-              {{data.message}}
8 
-            </fa-surface>
9 
-           </fa-modifier>
10 
-         </fa-modifier>
11 
-    </ui-view>
12 
-  </fa-modifier>
13 
-</fa-app>
1 
+<div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView">
2 
+  <div class="Aligner">
3 
+    <div class="Aligner-item">
4 
+      <wallop-slider
5 
+          data-images="images"
6 
+          data-animation="fade"
7 
+          data-current-item-index="index"
8 
+          data-on-previous="updateTsPrevious()"
9 
+          data-on-next="updateTsNext()"
10 
+      ></wallop-slider>
11 
+    </div>
12 
+  </div>
13 
+
14 
+
15 
+
14 16 
 </div>

+ 14 - 0
app/views/test.html
View File 

@@ -0,0 +1,14 @@
1 
+<div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView" ng-click="fadeOut()">
2 
+  <fa-app id="app2">
3 
+  <fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]" fa-index="1">
4 
+    <ui-view style="position: absolute; z-index: 2;">
5 
+        <fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" >
6 
+            <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'" >
7 
+              {{data.message}}
8 
+            </fa-surface>
9 
+           </fa-modifier>
10 
+         </fa-modifier>
11 
+    </ui-view>
12 
+  </fa-modifier>
13 
+</fa-app>
14 
+</div>

+ 2 - 1
bower.json
View File 

@@ -28,7 +28,8 @@
28 28 
     "angular-sanitize": "^1.3.0",
29 29 
     "angular-touch": "^1.3.0",
30 30 
     "jQuery": "~2.1.4",
31 
-    "ngFx": "~1.1.0"
31 
+    "ngFx": "~1.1.0",
32 
+    "famous-bkimagesurface": "~1.0.3"
32 33 
   },
33 34 
   "resolutions": {
34 35 
     "angular": "1.3.8"