Swiper Carousel rotation effect

Carousel effects are common in requirements. This development uses React-swiper to record the configuration of related properties.

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// User operationswiperAfter that, whether to banautoplay
          }}
          loop={true}// end looploopedSlides={3}
          navigation={{
            prevEl: `.The ${styles.btnPrev} `,nextEl: `.The ${styles.btnNext}`
          }}
          pagination={{ 
            clickable: true
          }}
          slidesPerView={'auto'} // simultaneously displayedslidesThe number ofslideToClickedSlide={true}// Click centercenteredSlides={true}/ / set totrueWhen,active slideIt's centered, not left by defaultwatchSlidesProgress={true}/ / scheduleonProgress={(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) => {// The callback function is executed whenever swiper is set to start the transition animation. Transtion obtains the speed value of Swiper. 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;
Copy the code