messing with the slider

components.html

@@ -994,35 +994,35 @@ document
 
       <div class="component-example component-example-fullbleed">
         <div class="slider" id="mySlider">
-          <ul>
-            <li>
+          <div class="slides">
+            <div class="slide">
               <img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
               <span class="slide-text">&larr; Slide me</span>
-            </li>
-            <li>
+            </div>
+            <div class="slide">
               <img src="{{ page.base_url }}docs-assets/img/slide-2.jpg">
-            </li>
-            <li>
+            </div>
+            <div class="slide">
               <img src="{{ page.base_url }}docs-assets/img/slide-3.jpg">
-            </li>
-          </ul>
+            </div>
+          </div>
         </div>
       </div>
 
 {% highlight html %}
 <div class="slider" id="mySlider">
-  <ul>
-    <li>
+  <div class="slides">
+    <div class="slide">
       <img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
       <span class="slide-text">&larr; Slide me</span>
-    </li>
-    <li>
+    </div>
+    <div class="slide">
       <img src="{{ page.base_url }}docs-assets/img/slide-2.jpg">
-    </li>
-    <li>
+    </div>
+    <div class="slide">
       <img src="{{ page.base_url }}docs-assets/img/slide-3.jpg">
-    </li>
-  </ul>
+    </div>
+  </div>
 </div>
 {% endhighlight %}
 

dist/ratchet.css

@@ -1036,14 +1036,13 @@ input[type="button"] {
 .slider,
 .slider > li {
   width: 100%;
-  height: 200px;
 }
 
 .slider {
   overflow: hidden;
   background-color: #000;
 }
-.slider > ul {
+.slider .slides {
   position: relative;
   padding: 0;
   font-size: 0;
@@ -1051,13 +1050,13 @@ input[type="button"] {
   -webkit-transition: all 0 linear;
   transition: all 0 linear;
 }
-.slider > ul > li {
+.slider .slides .slide {
   display: inline-block;
   vertical-align: top;
   width: 100%;
   height: 100%;
 }
-.slider > ul > li > * {
+.slider .slides .slide > * {
   font-size: 14px;
 }
 

dist/ratchet.js

@@ -600,7 +600,7 @@
   var scrollableArea;
 
   var getSlider = function (target) {
-    var i, sliders = document.querySelectorAll('.slider > ul');
+    var i, sliders = document.querySelectorAll('.slider > .slides');
     for (; target && target !== document; target = target.parentNode) {
       for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
     }
@@ -624,7 +624,7 @@
 
     if (!slider) return;
 
-    var firstItem  = slider.querySelector('li');
+    var firstItem  = slider.querySelector('.slide');
 
     scrollableArea = firstItem.offsetWidth * slider.children.length;
     isScrolling    = undefined;

docs-assets/css/docs.css

@@ -594,11 +594,13 @@ hr {
     opacity: 1;
   }
 
-  .slider li img {
+  .slider .slide img {
     width: 100%;
+    height: 570px;
+    display: block;
   }
 
-  .slider .slide-text {
+  .slider .slides .slide-text {
     position: absolute;
     top: 45%;
     left: 0;

lib/js/sliders.js

@@ -22,7 +22,7 @@
   var scrollableArea;
 
   var getSlider = function (target) {
-    var i, sliders = document.querySelectorAll('.slider > ul');
+    var i, sliders = document.querySelectorAll('.slider > .slides');
     for (; target && target !== document; target = target.parentNode) {
       for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
     }
@@ -46,7 +46,7 @@
 
     if (!slider) return;
 
-    var firstItem  = slider.querySelector('li');
+    var firstItem  = slider.querySelector('.slide');
 
     scrollableArea = firstItem.offsetWidth * slider.children.length;
     isScrolling    = undefined;

lib/sass/docs.scss

@@ -633,10 +633,12 @@ hr {
     top: 72px;
     opacity: 1;
   }
-  .slider li img {
+  .slider .slide img {
     width: 100%;
+    height: 570px; // Fullscreen fun times
+    display: block;
   }
-  .slider .slide-text {
+  .slider .slides .slide-text {
     position: absolute;
     top: 45%;
     left: 0;

lib/sass/sliders.scss

@@ -2,11 +2,10 @@
 // Slider styles (to be used with sliders.js)
 // --------------------------------------------------
 
-// Width/height of slider
+// Width of slider
 .slider,
 .slider > li {
   width: 100%;
-  height: 200px;
 }
 
 // Outer wrapper for slider
@@ -15,7 +14,7 @@
   background-color: #000;
 
   // Inner wrapper for slider (width of all slides together)
-  > ul {
+  .slides {
     position: relative;
     padding: 0;
     font-size: 0; // Remove spaces from inline-block children
@@ -23,7 +22,7 @@
     @include transition(all 0 linear);
     
     // Individual slide
-    > li {
+    .slide {
       display: inline-block;
       vertical-align: top; // Ensure that li always aligns to top
       width: 100%;