add slideshow

assets/css/_slideshow.scss

@@ -0,0 +1,160 @@
+
+
+.slideshow {
+    height: 100%;
+    width: 100%;
+    margin-left: 0;
+    overflow: hidden;
+    *{
+        position: relative;
+    }
+}
+            
+
+.slideshow-container{
+    height: 100%;
+    width: 100%;
+}
+
+.slideshow-inner {
+    width: calc(100% * var(--items));
+    height: 100%;
+}
+
+.slideshow-item {
+    width: calc(100%/var(--items));
+    height: 100%;
+    float: left;
+
+    figure{
+        width: 100%;
+        height: 100%;
+        img{
+            width: 100%;
+        height: 100%;
+        object-fit: cover; 
+        }
+    }
+}
+
+
+/* Display slides (input checked) 
+--------------------------------------------------------
+-------------------------------------------------------- */
+
+.slideshow-inner {
+    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
+    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.slideshow-item {
+    transition: all 0.5s ease-out;
+}
+
+
+/* Move slides overflowed container */
+#slide-input-1:checked ~ .slideshow-inner {
+    left: 0;
+}
+#slide-input-2:checked ~ .slideshow-inner {
+    left: -100%;
+}
+#slide-input-3:checked ~ .slideshow-inner {
+    left: -200%;
+}
+
+
+
+
+
+    
+/* Controls (arrows) 
+--------------------------------------------------------
+-------------------------------------------------------- */
+
+.slideshow-controls {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.slide_controls {
+    width: 40px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    will-change: z-index;
+}
+.slide_controls-previous {
+    left: 0;
+}
+.slide_controls-next {
+    right: 0;
+}
+
+span.controls {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+}
+
+span.controls::before,
+span.controls::after {
+    padding: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    background: white;
+    font-size: 20px;
+    z-index: 9;
+}
+
+.slide_controls-previous:hover ~ span.controls:before,
+.slide_controls-next:hover ~ span.controls:after {
+    background: #bfbfbf!important;
+}
+
+span.controls::before {
+    content: "❬";
+    left: -1px;
+}
+
+span.controls::after {
+    content: "❭";
+    right: -1px;
+}
+
+/* Control arrows display
+--------------------------------------------------------------------
+-------------------------------------------------------------------- */
+
+#slide-input-1:checked ~ .slideshow-controls label {
+    z-index: -1;
+}
+#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(1),
+#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(2) {
+    z-index: 11;
+}
+
+#slide-input-2:checked ~ .slideshow-controls label {
+    z-index: -1;
+}
+#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(3),
+#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(4) {
+    z-index: 11;
+}
+
+#slide-input-3:checked ~ .slideshow-controls label {
+    z-index: -1;
+}
+#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(5),
+#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(6) {
+    z-index: 11;
+}
+
+
+
+
+