const MAX_SCALE = 0.7;
const MIN_SCALE = 0.5;
const DRAGGING_MAX_DISTANCE = 1000;
const PAGE_DURATION = 100;
const SWIPER_DURATION = 500;
const CARD_COUNT = 6;

@Entry
@Component
struct CardCarousel {
 private ctrl: SwiperController = new SwiperController();
 @State currentIndex: number = 0;
 @State scaleArray: number[] = new Array(CARD_COUNT).fill(MIN_SCALE);
 private colorArray: Color[] = [Color.Yellow, Color.Blue, Color.Green, Color.Red, Color.Gray, Color.Orange];
 private startSwiperOffset: number = 0;

 aboutToAppear() {
 this.scaleArray[0] = MAX_SCALE;
 }

 private getNextIndex(index: number): number {
 return (index + 1) % CARD_COUNT;
 }

 private getPrevIndex(index: number): number {
 return (index - 1 + CARD_COUNT) % CARD_COUNT;
 }

 private onGestureSwipe(index: number, e: SwiperAnimationEvent) {
 if (this.startSwiperOffset === 0) {
 this.startSwiperOffset = e.currentOffset;
 }

 const distance = Math.abs(this.startSwiperOffset - e.currentOffset);
 const delta = Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE);
 const nextIndex = this.getNextIndex(index);
 const prevIndex = this.getPrevIndex(index);

 this.scaleArray[index] = MAX_SCALE - delta;

 if (e.currentOffset < this.startSwiperOffset) {
 this.scaleArray[nextIndex] = MIN_SCALE + delta;
 this.scaleArray[prevIndex] = MIN_SCALE;
 } else {
 this.scaleArray[prevIndex] = MIN_SCALE + delta;
 this.scaleArray[nextIndex] = MIN_SCALE;
 }
 }

 private onAnimationStart(_: number, targetIndex: number) {
 this.scaleArray = this.scaleArray.map((_, i) => i === targetIndex ? MAX_SCALE : MIN_SCALE);
 }

 build() {
 Column() {
 Swiper(this.ctrl) {
 ForEach(this.colorArray, (color: Color, index: number) => {
 Column()
 .width('100%')
 .height('100%')
 .backgroundColor(color)
 .scale({ x: this.scaleArray[index], y: this.scaleArray[index] })
 .animation({ duration: PAGE_DURATION, curve: Curve.Linear })
 .borderRadius(12)
 }, (color: Color, index: number) => `card_${index}`);
 }
 .displayMode(SwiperDisplayMode.STRETCH)
 .displayCount(1)
 .width('100%')
 .height('100%')
 .index(this.currentIndex)
 .cachedCount(1)
 .indicator(true)
 .duration(SWIPER_DURATION)
 .itemSpace(0)
 .prevMargin(20)
 .nextMargin(20)
 .curve(Curve.Linear)
 .onGestureSwipe((i, e) => this.onGestureSwipe(i, e))
 .onAnimationStart((i, t) => this.onAnimationStart(i, t))
 .onChange(i => this.currentIndex = i)
 .onAnimationEnd(() => this.startSwiperOffset = 0)
 }
 .width('100%')
 .height('100%')
 .justifyContent(FlexAlign.Center)
 }
}