swiper 旋转木马轮播效果

旋转木马效果在需求中很常见，这次开发使用的react-swiper，记录下相关的属性配置。

import styles from './index.module.less'
// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
// install Swiper modules
SwiperCore.use([Navigation, Pagination]);

function Index() {

  return (
      <div className={styles.featWrap}>
        <Swiper
          autoplay={{ 
            delay: 3000,
            disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
          }}
          loop={true}  //首尾循环
          loopedSlides={3}
          navigation={{
            prevEl: `.${styles.btnPrev}`,
            nextEl: `.${styles.btnNext}`
          }}
          pagination={{ 
            clickable: true
          }}
          slidesPerView={'auto'} //同时显示的slides数量
          slideToClickedSlide={true} //点击居中
          centeredSlides={true}  //设定为true时，active slide会居中，而不是默认状态下的居左
          watchSlidesProgress={true} //进度
          onProgress={(swiper, progress) => {
            const slides = swiper.slides
            for (let i = 0; i < slides.length; i++) {
              const slide = slides.eq(i)
              const slideProgress = slides[i].progress
              const modify = 1
              const translate = slideProgress * modify * 746 + 'px'
              let scale = 1 - Math.abs(slideProgress) / 5
              scale = scale === 1 ? scale : scale + 0.1
              const zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
              // console.log(translate)
              slide.transform('translateX(' + translate + ') scale(' + scale + ')')
              slide.css('zIndex', zIndex)
            }
          }}
          onSetTransition={(swiper, transition) => {
            // 回调函数，每当设置Swiper开始过渡动画时执行。transtion获取到的是Swiper的speed值。
            const slides = swiper.slides
            for (let i = 0; i < slides.length; i++) {
              const slide = slides.eq(i)
              slide.transition(transition)
            }
          }}
        >
          <SwiperSlide><img alt="" src="https://p4.ssl.qhimg.com/t0118408d3d465a658f.jpg"/></SwiperSlide>
          <SwiperSlide><img alt="" src="https://p4.ssl.qhimg.com/t0174a80fa8a38268e1.jpg"/></SwiperSlide>
          <SwiperSlide><img alt="" src="https://p4.ssl.qhimg.com/t011e890c8d1f05ba7f.jpg"/></SwiperSlide>
          <SwiperSlide><img alt="" src="https://p0.ssl.qhimg.com/t01a30af142da2482bf.jpg"/></SwiperSlide>
          <SwiperSlide><img alt="" src="https://p2.ssl.qhimg.com/t01b664d0c50dd0c516.jpg"/></SwiperSlide>
        </Swiper>
        <span className={styles.btnPrev}></span>
        <span className={styles.btnNext}></span>
      </div>
  );
}

export default Index;