first commit

themes/ayon__/_dev/css/components/imageslider.scss

@@ -0,0 +1,78 @@
+.carousel {
+  margin-bottom: 1.5rem;
+  .direction {
+    z-index: auto;
+  }
+  .carousel-inner {
+    height: auto;
+    @media (max-width: 767px) {
+      height: auto;
+    }
+  }
+  .carousel-item {
+    height: 100%;
+    img {
+      @media (max-width: 767px) {
+        max-width: 100%;
+        height: auto;
+      }
+      @media (min-width: 768px) {
+        width: 100%;
+        margin-left: 0;
+      }
+    }
+    figure {
+      margin:0;
+    }
+    .caption {
+      position: absolute;
+      @media (min-width: 768px) {
+      bottom: 28px;
+      left: 90px;
+      }
+      @media (max-width: 767px) {
+        bottom: 5px;
+        left: 40px;
+      }
+      color: white;
+      max-width: 340px;
+      .caption-description p {
+        color: white;
+      }
+    }
+    figure {
+      @media (max-width: 767px) {
+        margin: 0;
+      }
+    }
+  }
+  .carousel-control {
+        display: none;
+    opacity: 1;
+    .icon-next,
+    .icon-prev {
+      &::before {
+        content: "";
+      }
+      i {
+        font-size: 3.125rem;
+        color: white;
+      }
+      &:hover {
+        i {
+          color: $brand-primary;
+        }
+      }
+    }
+    .icon-prev {
+      left: 1rem;
+    }
+    .icon-next {
+      right: 2rem;
+    }
+    &.left,
+    &.right {
+      background: none;
+    }
+  }
+}