踩坑，新版swiper在ant design pro 或react组件中autoplay不起作用的更正设置方法

swiper一直更新是个好事，但使用方法一直在悄悄的变，真得很坑人，直接带过坑吧。

关键在这个引入这里，新版的必须将Autoplay作为模块引入，反正和以前版本有很多不一样了。 

import { Autoplay, EffectFade, Pagination, Navigation } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css/effect-fade';

接下来是组件中引入

      
        {slideList?.map(itm => {
          return (
            
              
            
          )
        })}
      

再根据demo设置自定义样式，这个不是必须的了，只是图片等更合理的一些设置而已，可以自己定义：

export const SwipperWrapper = styled.div`
  margin-top:3rem;
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
  }
  .swiper-slide img {
    display: block;
    width: 100%;
  }
`;

其他说明，新版本的swiper在react中基本上都是以模块或组件引入了，如果有些效果不起作用，说明你得使用方法和对应版本可能不一样，重新根据官网版本安装指定版本或自己找对应版本的demo再进行设置。

下面是自己需要用到的样式，需要那个就必须应用对应的样式，注意这个与低版本的路径也不一样了。

Styles

Swiper package contains different sets of CSS, Less and SCSS styles:

• swiper/css - only core Swiper styles
• swiper/css/bundle - all Swiper styles including all modules styles (like Navigation, Pagination, etc.)

Modules styles (not required if you already imported bundle styles):

• swiper/css/a11y - styles required for A11y module
• swiper/css/autoplay - styles required for Autoplay module
• swiper/css/controller - styles required for Controller module
• swiper/css/effect-cards - styles required for Cards Effect module
• swiper/css/effect-coverflow - styles required for Coverflow Effect module
• swiper/css/effect-creative - styles required for Creative Effect module
• swiper/css/effect-cube - styles required for Cube Effect module
• swiper/css/effect-fade - styles required for Fade Effect module
• swiper/css/effect-flip - styles required for Flip Effect module
• swiper/css/free-mode - styles required for Free Mode module
• swiper/css/grid - styles required for Grid module
• swiper/css/hash-navigation - styles required for Hash Navigation module
• swiper/css/history - styles required for History module
• swiper/css/keyboard - styles required for Keyboard module
• swiper/css/manipulation - styles required for Manipulation module
• swiper/css/mousewheel - styles required for Mousewheel module
• swiper/css/navigation - styles required for Navigation module
• swiper/css/pagination - styles required for Pagination module
• swiper/css/parallax - styles required for Parallax module
• swiper/css/scrollbar - styles required for Scrollbar module
• swiper/css/thumbs - styles required for Thumbs module
• swiper/css/virtual - styles required for Virtual module
• swiper/css/zoom - styles required for Zoom module