Updated CSS class names to match original repo

wallop-slider--rotate.css

@@ -1,22 +1,38 @@
-/*==========  SPECIAL CONFIG  ==========*/
-.wallop-slider--rotate .wallop-slider__item--hide-previous,
-.wallop-slider--rotate .wallop-slider__item--hide-next {
-  display: block;
+/**
+ * wallop--rotate.css
+ *
+ * @fileoverview Rotate animation for wallop
+ *
+ * @author Pedro Duarte
+ * @author http://pedroduarte.me/wallop
+ */
+
+.Wallop--rotate .Wallop-item--hidePrevious,
+.Wallop--rotate .Wallop-item--hideNext {
+  visibility: visible;
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
-.wallop-slider--rotate .wallop-slider__item--hide-previous {
+
+.Wallop--rotate .Wallop-item--hidePrevious {
   -webkit-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
   -moz-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
   -ms-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
   animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
 }
-.wallop-slider--rotate .wallop-slider__item--hide-next {
+
+.Wallop--rotate .Wallop-item--hideNext {
   -webkit-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
   -moz-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
   -ms-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
   animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
 }
 
-/*==========  SPCECIAL ANIMATIONS  ==========*/
+.Wallop--rotate .Wallop-item--hidePrevious { z-index: 2; }
+.Wallop--rotate .Wallop-item--showNext { z-index: 1; }
+
 @-webkit-keyframes rotateToLeft {
   99% {
     opacity: 1;

wallop-slider-directive.js

@@ -1,11 +1,11 @@
 
 (function() {
 
-  angular.module('MyApp', [])
+  angular.module('wallopSlider', [])
 
     .directive('wallopSlider', function () {
         return {
-          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="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="wallop-slider__btn wallop-slider__btn--next btn btn--next" ng-disabled="nextDisabled" ng-click="onNextButtonClicked()">Next</button></div>',
+          template: '<div class="Wallop {{animationClass}}"><div class="Wallop-list"><div class="Wallop-item {{itemClasses[$index]}}" ng-repeat="i in images"><img src="{{i}}"></div></div><button ng-show="images.length>1" class="Wallop-buttonPrevious" ng-disabled="prevDisabled" ng-click="onPrevButtonClicked()">Previous</button><button ng-show="images.length>1" class="Wallop-buttonNext" ng-disabled="nextDisabled" ng-click="onNextButtonClicked()">Next</button></div>',
           restrict: 'EA',
           transclude: true,
           replace: false,
@@ -28,18 +28,18 @@
 
             // set animation class corresponding to animation defined in CSS. e.g. rotate, slide
             if ($scope.animation) {
-              $scope.animationClass = 'wallop-slider--' + $scope.animation;
+              $scope.animationClass = 'Wallop--' + $scope.animation;
             }
 
             var _displayOptions = {
-              btnPreviousClass: 'wallop-slider__btn--previous',
-              btnNextClass: 'wallop-slider__btn--next',
-              itemClass: 'wallop-slider__item',
-              currentItemClass: 'wallop-slider__item--current',
-              showPreviousClass: 'wallop-slider__item--show-previous',
-              showNextClass: 'wallop-slider__item--show-next',
-              hidePreviousClass: 'wallop-slider__item--hide-previous',
-              hideNextClass: 'wallop-slider__item--hide-next'
+              btnPreviousClass: 'Wallop-item--previous',
+              btnNextClass: 'Wallop-item--next',
+              itemClass: 'Wallop-item__item',
+              currentItemClass: 'Wallop-item--current',
+              showPreviousClass: 'Wallop-item--showPrevious',
+              showNextClass: 'Wallop-item--showNext',
+              hidePreviousClass: 'Wallop-item--hidePrevious',
+              hideNextClass: 'Wallop-item--hideNext'
             };
 
             function updateClasses() {

wallop-slider.css

@@ -1,35 +1,54 @@
-* {
-  padding: 0;
-  margin: 0;
-}
-
-.wallop-slider {
-  width: 100%;
-}
+/**
+ * wallop.css
+ *
+ * @fileoverview Default styles for wallop – recommended
+ *
+ * @author Pedro Duarte
+ * @author http://pedroduarte.me/wallop
+ */
 
-.wallop-slider__list {
-  list-style: none;
-  position: relative;
-  overflow: hidden;
+/*
+  This is the top-level selector
+  It should be relative positioned
+  to allow the children to be positioned absolutely
+  relative to this
+ */
+.Wallop {
+    position: relative;
 }
 
-.wallop-slider__item {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-.wallop-slider__item img {
-  display: block;
-  width: 100%;
+/*
+  This element groups all the items, but not the buttons
+  It's a recommendation but it's very likely
+  you'll want to hide any overflow from the items
+  Especially when doing animations such as scale
+ */
+.Wallop-list {
+    position: relative;
+    overflow: hidden;
 }
 
-.wallop-slider__item--current {
-  display: block;
-  position: static;
+/*
+  This is the item element
+  By default, they are all hidden and
+  positioned absolute
+  I recommend always having .Wallop-item--current
+  in your markup by default (probably on the first element)
+ */
+.Wallop-item {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
 }
 
-footer {
-  padding: 30px 0;
+/*
+  This is the current item element
+  All we do here, is make it visible again reset
+  the position to static. Could also be relative
+ */
+.Wallop-item--current {
+    visibility: visible;
+    position: relative;
 }