Changing Carousel

static/css/style.css

@@ -198,9 +198,7 @@ body.side-menu.active {
 .content-open:before {
   position: absolute;
   top: 0;
-  right: 0;
-  left: 0;
-  bottom: -2000000000px;
+  bottom: 0;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 99;
@@ -223,38 +221,27 @@ body.side-menu.active {
   overflow: hidden;
 }
 
-.carousel-slider{
+.carousel-slider {
   width: 100%;
-  height: 130px;
   overflow: hidden;
 }
-.carousel-slider .carousel-list{
+
+.carousel-list {
   display: flex;
+  flex-wrap: nowrap;
+  transition: transform 0.5s ease-in-out;
   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-item {
+  width: calc(100% / 6);
+  flex: 0 0 calc(100% / 6); 
+  text-align: center;
+}
+
+@media only screen and (max-width: 768px) {
+  .carousel-item {
+    width: calc(100% / 3); 
+    flex: 0 0 calc(100% / 3);
   }
- }
-
- .carousel-slider:hover .carousel-item{
-  animation-play-state: paused!important;
- }
-
+}