feat: migrate to new slider, fix new slider styles

gravity-ui · Aug 6, 2024 · cc221d7 · cc221d7
1 parent 3068e0f
commit cc221d7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/src/blocks/HeaderSlider/HeaderSlider.tsx b/src/blocks/HeaderSlider/HeaderSlider.tsx
@@ -4,7 +4,7 @@ import {MobileContext} from '../../context/mobileContext';
 import {HeaderSliderBlockProps, SliderType} from '../../models';
 import {block} from '../../utils';
 import Header from '../Header/Header';
-import {SliderBlock} from '../index';
+import {SliderNewBlock as SliderBlock} from '../unstable';
 
 import './HeaderSlider.scss';
 

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,
         },
     };
 };
diff --git a/src/components/Media/Image/Image.tsx b/src/components/Media/Image/Image.tsx
@@ -3,7 +3,7 @@ import React, {Fragment, useEffect, useState} from 'react';
 import {Interpolation, animated, config, useSpring} from '@react-spring/web';
 import debounce from 'lodash/debounce';
 
-import SliderBlock from '../../../blocks/Slider/Slider';
+import {SliderNewBlock as SliderBlock} from '../../../blocks/unstable';
 import {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';
 import {block, getQaAttrubutes} from '../../../utils';
 import BackgroundImage from '../../BackgroundImage/BackgroundImage';