轮播图-近大远小效果

呈现效果如图所示的轮播图

'use client'

import './page.scss'
import React, { useState } from 'react';
import { Swiper } from 'antd-mobile'


export default function SwiperComponent() {

    const images = [
        '/images/art-img/living/taoci.png',
        '/images/art-img/living/diaozhuyishu.png',
        '/images/art-img/living/jianke.png',
        '/images/art-img/living/jianzhu.png',
        '/images/art-img/living/jinshugongyi.png',
        '/images/art-img/living/minjianyishu.png',
    ];
    const [currentIndex, setCurrentIndex] = useState(2)
    const totalImages = images.length
   
    const getClassName = (index: number) => {
        const distance = Math.abs((index - currentIndex + totalImages) % totalImages);  // 判断与图片的距离
        
        if (distance === 0) return 'current';
        if (distance === 1 || distance === totalImages - 1) return 'near';
        if (distance === 2 || distance === totalImages - 2) return 'far';
        if (distance === 3 || distance === totalImages - 3) return 'farthest';
        return '';
    };

    return (
        <div className="carousel_box">
            <Swiper
                className="carousel"
                direction='vertical'
                loop
                onIndexChange={index => setCurrentIndex(index)}
                indicator={() => null}
                slideSize={100}
                trackOffset={200}
                style={{ width: '100%', '--height': '500px' }}
            >
                {images.map((img, index) => {
                    return <Swiper.Item key={index} className={`swiper_slide ${getClassName(index)}`}>
                        <Link href={``}>
                            <Image src={img} width={0} height={0} sizes='100%' alt='' style={{ width: '100%', height: 'auto' }} />
                        </Link>
                    </Swiper.Item>
                })}
            </Swiper>
        </div>
    )
}

distance 计算了当前图片与目标图片之间的距离。这个距离反映了目标图片相对于当前图片的位置，以决定它应当应用什么样的视觉效果。分别对应4个className 的名称

scss样式

.carousel {
  height: 300px; // 根据需要调整高度
  overflow: hidden; // 隐藏溢出的部分
  position: relative;

  .adm-swiper {
    height: 100%;
  }

  .adm-swiper-track {
    height: 100px;
  }

  .swiper_slide {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s, opacity 0.3s;
    width: 100%;
    height: 100px;

    &.farthest {
      transform: scale(0);
    }

    &.far {
      transform: scale(0.2);
      opacity: 0.5;
    }

    &.near {
      transform: scale(0.6);
      opacity: 0.7;
    }

    &.current {
      transform: scale(1);
      opacity: 1;
    }
  }


  .adm-swiper-slide-prev,
  .adm-swiper-slide-next {
    display: none; // 滚动后的div不再页面显示
  }

  a{
    display: flex;
    align-items: center;
    width: 60px;
    height: 100px;
  }
}