Migrate slideshow to alpine

com/static/css/slideshow.scss

@@ -1,4 +1,4 @@
-body{
+body {
   position: absolute;
   width: 100vw;
   height: 100vh;
@@ -7,22 +7,22 @@ body{
   margin: 0;
 }
 
-#slideshow{
+#slideshow {
   position: relative;
   background-color: lightgrey;
 
   height: 100%;
 
-  *{
+  * {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
 
-  &:hover{
+  &:hover {
 
-    &::before{
+    &::before {
 
       position: absolute;
       width: 100%;
@@ -43,7 +43,7 @@ body{
 
   }
 
-  &.fullscreen{
+  &:fullscreen {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -51,57 +51,58 @@ body{
     left: 0;
     background: none;
 
-    &:before{
-      display:none;
+    &:before {
+      display: none;
     }
 
-    #slides{
+    #slides {
       height: 100vh;
     }
 
   }
 
-  #slides{
+  #slides {
     position: relative;
     height: 100%;
     overflow: hidden;
+    background-color: grey;
 
-    .slide{
+    .slide {
       position: absolute;
       width: 100%;
       height: 100%;
 
-      display: inline-flex;
+      display: none;
       justify-content: center;
 
       top: 0px;
 
-      background-color: grey;
-      transition: left 1s ease-out;
-
-      img{
+      img {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
       }
-    }
 
-    .slide.left{
-      left: -100%;
-    }
+      &.active {
+        animation: scrolling 1s;
+        display: inline-flex;
+      }
 
-    .slide.center{
-      left: 0px;
-    }
+      @keyframes scrolling {
+        0% {
+          transform: translateX(100%);
+        }
+
+        100% {
+          transform: translateX(0%);
+        }
+      }
 
-    .slide.right{
-      left: 100%;
-      transition: none;
     }
   }
 
 
-  #progress_bullets{
+  #progress_bullets {
     position: absolute;
     bottom: 10px;
     width: 100%;
@@ -112,7 +113,7 @@ body{
 
     margin-bottom: 10px;
 
-    .bullet{
+    .bullet {
       height: 10px;
       width: 10px;
 
@@ -123,27 +124,23 @@ body{
 
       background-color: grey;
 
-      &.active{
+      &.active {
         background-color: #c99836;
       }
     }
   }
 
-  #progress_bar{
+  progress {
     position: absolute;
     bottom: 0px;
     height: 10px;
-    background-color: #304c83;
+    // color: #304c83;
+    width: 100%;
+    margin-bottom: 0px;
+    border: none;
 
-    &.init{
-      width: 0px;
-      transition: none;
-    }
-
-    &.progress{
-      width: 100%;
-      transition: width 10s linear;
+    &[value] {
+      background-color: transparent;
     }
   }
-}
-
+}