Use .slide-full-width and .slide-cover-width on slider and slide

Author: ivanvermeyen

public/css/slider.css

@@ -290,7 +290,7 @@ <h3>Single image</h3>
 
 <h3>Full width slides with centered content</h3>
 <p>
-    Add the <code>slider-full-width</code> class to the <code>.slider</code>
+    Add the <code>slide-full-width</code> class to the <code>.slider</code>
     to make all slides 100% width.<br>
     Or add the <code>slide-full-width</code> class to any
     <code>.slide</code> to make only that one 100% width.
@@ -299,7 +299,7 @@ <h3>Full width slides with centered content</h3>
     Notice only the slides content is clickable.
 </p>
 
-<div class="slider slider-full-width">
+<div class="slider slide-full-width">
 
     <a href="#" class="slider-prev">&langle;</a>
     <a href="#" class="slider-next">&rangle;</a>
@@ -331,14 +331,14 @@ <h3>Full width slides with centered content</h3>
 
 <h3>Full width slides with covered content</h3>
 <p>
-    Add the <code>slider-cover-width</code> class to the <code>.slider</code>
+    Add the <code>slide-cover-width</code> class to the <code>.slider</code>
     to make all slides 100% width.<br>
     Or add the <code>slide-cover-width</code> class to any
     <code>.slide</code> to make only that one 100% width.
 </p>
 <p>Notice the entire slide is now clickable.</p>
 
-<div class="slider slider-cover-width">
+<div class="slider slide-cover-width">
 
     <a href="#" class="slider-prev">&langle;</a>
     <a href="#" class="slider-next">&rangle;</a>
@@ -375,7 +375,7 @@ <h3>Full width slides with covered content</h3>
     div with <code>background-size: cover</code>.
 </p>
 
-<div class="slider slider-cover-width">
+<div class="slider slide-cover-width">
 
     <a href="#" class="slider-prev">&langle;</a>
     <a href="#" class="slider-next">&rangle;</a>
@@ -410,7 +410,7 @@ <h3>Content slider</h3>
 </p>
 <p>Full width...</p>
 
-<div class="slider slider-full-width">
+<div class="slider slide-full-width">
 
     <a href="#" class="slider-prev">&langle;</a>
     <a href="#" class="slider-next">&rangle;</a>

public/index.html

@@ -91,8 +91,4 @@
         }
     }
 
-    .slider-cover-width .slide-image {
-        width: 100%;
-    }
-
 }

src/scss/_slide-image.scss

@@ -32,11 +32,8 @@
     }
 
     &-full-width, &-cover-width {
-        flex-basis: 100%;
+        .slide, &.slide {
+            flex-basis: 100%;
+        }
     }
 }
-
-.slider-full-width .slide,
-.slider-cover-width .slide {
-    flex-basis: 100%;
-}