Merge pull request #556 from ChanceM/fix/carousel-handles

JupiterBroadcasting · Nov 16, 2023 · caf5016 · caf5016
2 parents fb89e6e + 056f089
commit caf5016
Showing 1 changed file with 44 additions and 2 deletions.
diff --git a/themes/jb/assets/css/layout/show-slider.scss b/themes/jb/assets/css/layout/show-slider.scss
@@ -1,7 +1,7 @@
 
 .show-img {
- height: 168px !important;
- width: 300px !important
+//  height: 170px !important;
+//  width: 303px !important
 }
 
 .show-card {
@@ -11,14 +11,56 @@
 .show-slider {
   margin-bottom: 2rem;
   display: block;
+  border-radius: 12px;
 }
 
+.swiper-button-prev,
+.swiper-button-next {
+  top: 0;
+  width: 50px;
+  margin-top: 0;
+  height: 100%;
+
+  &.swiper-button-disabled:before {
+    display: none;
+  }
+}
 .swiper-button-prev {
   color: white;
+  left: 0;
+
+  &:before {
+    content: '';
+    background: linear-gradient(90deg, #333333dd, transparent);
+    inset: 0;
+    position: absolute;
+    z-index: -1;
+    opacity: .75;
+    transition: opacity .5s ease-in-out;
+
+  }
+  &:hover:before {
+    opacity: 1;
+  }
 }
 
 .swiper-button-next {
   color: white;
+  right: 0;
+
+  &:before {
+    content: '';
+    background: linear-gradient(-90deg, #333333dd, transparent);
+    inset: 0;
+    position: absolute;
+    z-index: -1;
+    opacity: .75;
+    transition: opacity .5s ease-in-out;
+
+  }
+  &:hover:before {
+    opacity: 1;
+  }
 }
 
 .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {