Image Slider click-to-slide option

Author: zvizvi

dist/cssonly.css

@@ -1,7 +1,7 @@
 {
   "name": "cssonly",
   "description": "",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "main": "dist/cssonly.css",
   "devDependencies": {
     "autoprefixer": "^9.8.8",

package-lock.json

@@ -7,6 +7,7 @@
   position: relative;
   width: var(--width);
   height: var(--height);
+  user-select: none;
 
   > * {
     max-width: 100%;

package.json

@@ -11,7 +11,7 @@
   <link type="text/css" rel="stylesheet" href="/dist/cssonly.css" />
 
   <div id="app" style="text-align: center;">
-    <div class="cssonly-slider">
+    <div class="cssonly-slider click-to-slide">
       <input type="radio" name="cssonly-slider" id="slide-1" />
       <input type="radio" name="cssonly-slider" id="slide-2" />
       <input type="radio" name="cssonly-slider" id="slide-3" />

src/image-comparison/style.scss

@@ -48,6 +48,8 @@
   .prev-arrows,
   .next-arrows {
     label {
+      z-index: 1;
+
       &::before {
         color: #aaa;
         font-size: 30px;
@@ -58,7 +60,7 @@
         width: 20px;
         text-align: center;
         line-height: 15px;
-        z-index: 1;
+        z-index: inherit;
         cursor: pointer;
       }
 
@@ -79,11 +81,33 @@
       right: -30px;
     }
 
-    &:first-of-type::before {
+    &:first-of-type {
       z-index: 2;
     }
   }
 
+  &.click-to-slide {
+    .prev-arrows,
+    .next-arrows {
+      label::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 50%;
+        z-index: inherit;
+      }
+    }
+
+    .prev-arrows label::after {
+      left: 0;
+    }
+
+    .next-arrows label::after {
+      right: 0;
+    }
+  }
+
   .dots {
     position: absolute;
     bottom: 8px;
@@ -93,8 +117,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1;
+    z-index: 2;
     opacity: 0.9;
+    pointer-events: none;
 
     label {
       position: relative;
@@ -107,6 +132,7 @@
       margin-right: 6px;
       cursor: pointer;
       transition: opacity 0.2s;
+      pointer-events: all;
 
       &:last-child {
         margin-right: 0;
@@ -141,7 +167,7 @@
 
     &:indeterminate {
       ~ .next-arrows {
-        label:nth-of-type(2)::before {
+        label:nth-of-type(2) {
           z-index: 2;
         }
       }
@@ -167,13 +193,13 @@
         }
 
         ~ .prev-arrows {
-          label:nth-of-type(#{$i - 1})::before {
+          label:nth-of-type(#{$i - 1}) {
             z-index: 2;
           }
         }
 
         ~ .next-arrows {
-          label:nth-of-type(#{$i + 1})::before {
+          label:nth-of-type(#{$i + 1}) {
             z-index: 2;
           }
         }