Theme the keyboard slider. #6

css/app.css

@@ -100,8 +100,22 @@ ul {
   color: #555;
   cursor: pointer; }
 
-.uhk {
+.keyboard-slider {
-  max-width: 100%; }
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: auto; }
+  .keyboard-slider .uhk__layer-wrapper {
+    width: 100%;
+    height: auto;
+    text-align: center;
+    position: absolute;
+    left: 100%; }
+    .keyboard-slider .uhk__layer-wrapper.current {
+      left: 0; }
+    .keyboard-slider .uhk__layer-wrapper .uhk {
+      max-width: 100%;
+      width: 98%; }
 
 .grip {
   position: relative; }
@@ -116,14 +130,7 @@ ul {
     top: 50%;
     left: 7px;
     margin-top: -10px; }
+  .grip.btn-primary:before {
+    background-image: url(../images/grips/vertical.png); }
   .grip:hover:before {
     display: block; }
-
-.owl-carousel {
-  max-width: 991px;
-  margin: auto; }
-
-.owl-carousel .item img {
-  display: block;
-  width: 100%;
-  height: auto; }

sass/app.scss

@@ -167,8 +167,28 @@ ul {
   }
 }
 
-.uhk {
+.keyboard-slider {
-  max-width: 100%;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+
+  .uhk__layer-wrapper {
+    width: 100%;
+    height: auto;
+    text-align: center;
+    position: absolute;
+    left: 100%;
+
+    &.current {
+      left: 0;
+    }
+
+    .uhk {
+      max-width: 100%;
+      width: 98%;
+    }
+  }
 }
 
 .grip {
@@ -187,6 +207,12 @@ ul {
     margin-top: -10px;
   }
 
+  &.btn-primary {
+    &:before {
+      background-image: url(../images/grips/vertical.png);
+    }
+  }
+
   &:hover {
     &:before {
       display: block;