swiper实现滚动效果

css

   .swiper-wrapper {
            -webkit-transition-timing-function: linear; /*之前是ease-out*/
            -moz-transition-timing-function: linear;
            -ms-transition-timing-function: linear;
            -o-transition-timing-function: linear;
            transition-timing-function: linear;
            margin: 0 auto;
          }

index

import { Autoplay, EffectFade } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
    <Swiper
                      // 一页显示多少
                      slidesPerView={24}
                      // 引入模块
                      modules={[EffectFade, Autoplay]}
                      // 自动播放间隔
                      autoplay={{
                        delay: 0,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                      }}
                      // 播放速度
                      speed={2000}
                      // 是否循环
                      loop={true}
                    >
                      {item.map((item1: string, index: number) => {
                        return (
                          <SwiperSlide key={index}>
                            <div className={styles.characters}>{item1}</div>
                          </SwiperSlide>
                        );
                      })}
                    </Swiper>