Adding carousel

static/css/style.css

@@ -198,7 +198,9 @@ body.side-menu.active {
 .content-open:before {
   position: absolute;
   top: 0;
-  bottom: 0;
+  right: 0;
+  left: 0;
+  bottom: -2000000000px;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 99;
@@ -220,3 +222,39 @@ body.side-menu.active {
 .block-scroll{
   overflow: hidden;
 }
+
+.carousel-slider{
+  width: 100%;
+  height: 130px;
+  overflow: hidden;
+}
+.carousel-slider .carousel-list{
+  display: flex;
+  width: 100%;
+  min-width: calc(100px * 16);
+  position: relative;
+}
+.carousel-slider .carousel-list .carousel-item{
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  left: 100%;
+  animation: autoRun 16s linear infinite;
+  animation-delay: calc((16s / 16) * (var(--position) - 1));
+}
+ .carousel-slider .carousel-list .carousel-item img{
+  width: 100%;
+ }
+
+ @keyframes autoRun {
+  from{
+    left: 100%;
+  }to{
+    left: calc(100px * -1);
+  }
+ }
+
+ .carousel-slider:hover .carousel-item{
+  animation-play-state: paused!important;
+ }
+