fix: new slider styles (#979)

* fix: slider new keep autoplay after interaction * fix: slider new safari fix * fix: slider new dots classname
gravity-ui · Aug 7, 2024 · d702a42 · d702a42
1 parent 3068e0f
commit d702a42
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/blocks/SliderNew/Slider.scss b/src/blocks/SliderNew/Slider.scss
@@ -14,6 +14,8 @@ $block: '.#{$ns}SliderNewBlock';
     }
 }
 
+$dotsCn: '.swiper-container-horizontal .swiper-pagination-bullets';
+
 $dotSize: 8px;
 
 #{$block} {
@@ -33,10 +35,24 @@ $dotSize: 8px;
         }
     }
 
-    &__slide {
+    &__slide.swiper-slide {
         padding: 0 #{$gridGutter};
         box-sizing: border-box;
-        flex-shrink: 0;
+        height: auto;
+
+        @keyframes safari-fix {
+            from {
+                transform: translateX(0.001px);
+            }
+            to {
+                transform: translateX(0);
+            }
+        }
+
+        // fix text under video in safari
+        &.swiper-slide-visible {
+            animation: safari-fix 300ms;
+        }
     }
 
     &__arrow {
@@ -121,7 +137,7 @@ $dotSize: 8px;
 
         padding: 0;
 
-        #{$root}__dots {
+        & #{$dotsCn} {
             bottom: $indentSM;
         }
 
@@ -167,7 +183,7 @@ $dotSize: 8px;
             position: relative;
         }
 
-        #{$root}__dots {
+        & #{$dotsCn} {
             bottom: $indentM;
         }
 

diff --git a/src/blocks/SliderNew/useSlider.tsx b/src/blocks/SliderNew/useSlider.tsx
@@ -78,6 +78,7 @@ export const useSlider = ({
         setIsLocked,
         autoplay: autoplayEnabled && {
             delay: autoplayMs,
+            disableOnInteraction: false,
         },
     };
 };