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

本文主要是介绍踩坑，新版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';

接下来是组件中引入

<SwipperWrapper ><SwiperspaceBetween={30}effect={'fade'}// slidesPerView={3}centeredSlides={true}navigation={true}pagination={{clickable: true,}}modules={[EffectFade,Autoplay,Navigation,Pagination]}autoplay={{delay: 3000,disableOnInteraction: false,}}loop>{slideList?.map(itm => {return (<SwiperSlide key={itm.id}><img src={`${itm.img}`} alt={itm.title} /></SwiperSlide>)})}</Swiper>
</SwipperWrapper>

再根据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

这篇关于踩坑，新版swiper在ant design pro 或react组件中autoplay不起作用的更正设置方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---