fix(kit): Carousel fix dragging in chrome

taiga-family · Nov 29, 2024 · e9301a8 · e9301a8
1 parent c678696
commit e9301a8
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/projects/kit/components/carousel/carousel.component.ts b/projects/kit/components/carousel/carousel.component.ts
@@ -16,7 +16,7 @@ import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
 import {TuiItem} from '@taiga-ui/cdk/directives/item';
 import {TuiPan} from '@taiga-ui/cdk/directives/pan';
 import type {TuiSwipeDirection} from '@taiga-ui/cdk/directives/swipe';
-import {TuiSwipe} from '@taiga-ui/cdk/directives/swipe';
+import {TUI_SWIPE_OPTIONS, TuiSwipe} from '@taiga-ui/cdk/directives/swipe';
 import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiClamp} from '@taiga-ui/cdk/utils/math';
@@ -44,6 +44,7 @@ import {TuiCarouselScroll} from './carousel-scroll.directive';
     templateUrl: './carousel.template.html',
     styleUrls: ['./carousel.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{provide: TUI_SWIPE_OPTIONS, useValue: {timeout: 200, threshold: 30}}],
     hostDirectives: [
         {
             directive: TuiCarouselDirective,
@@ -134,8 +135,8 @@ export class TuiCarouselComponent {
         {intersectionRatio}: IntersectionObserverEntry,
         index: number,
     ): void {
-        if (intersectionRatio && intersectionRatio !== 1 && !this.transitioned) {
-            this.updateIndex(index - Math.floor(this.itemsCount / 2));
+        if (intersectionRatio && intersectionRatio >= 0.5 && !this.transitioned) {
+            this.updateIndex(this.index < index ? index - this.itemsCount + 1 : index);
         }
     }
 

diff --git a/projects/kit/components/carousel/carousel.style.less b/projects/kit/components/carousel/carousel.style.less
@@ -57,6 +57,7 @@
     display: flex;
     overflow: auto;
     overscroll-behavior-x: none;
+    touch-action: none;
 
     &::before,
     &::after {

diff --git a/projects/kit/components/carousel/carousel.template.html b/projects/kit/components/carousel/carousel.template.html
@@ -5,9 +5,7 @@
 >
     <div
         waIntersectionObserver
-        waIntersectionRoot
-        waIntersectionRootMargin="100px 1000000px 100px -51%"
-        waIntersectionThreshold="0,1"
+        waIntersectionThreshold="0.5"
         class="t-wrapper"
     >
         <div