Swiper中文论坛

标题: swiper6无法自动轮播 [打印本页]

作者: 1639694029 时间: 2020-8-29 15:10
标题: swiper6无法自动轮播
在react中无法自动轮播，无论是设置成对象格式的autoplay还是单独设置都不可以，我的朋友也是这种情况，还有其他的帖子也有这个问题，这么核心的功能为什么都实现不了呢？？？
import React from "react";
import Swiper from "swiper";
import "./swiper-bundle.min.css";
import "./swiper.css"

export default class Banner extends React.Component{
componentDidMount(){
      new Swiper('.swiper-container',{
         autoplay: {
            delay: 1000,
            disableOnInteraction: false,
         },
         loop: true,
         grabCursor: true,
      });
}
render(){
         return (
            <div className="swiper-container">
                  <div className="swiper-wrapper">
                     <div className="swiper-slide">
                        <img src = "/img/banner1.jpg"/>
                     </div>
                     <div className="swiper-slide">
                        <img src = "/img/banner2.jpg"/>
                     </div>
                     <div className="swiper-slide">
                        <img src = "/img/banner3.jpg"/>
                     </div>
                  </div>
                  <div className="swiper-pagination"></div>
            </div>
         )
}
}

作者: haha88999 时间: 2020-8-31 13:59
楼主别试了，建议降至4.1版本，就一切正常了https://www.swiper.com.cn/api/pagination/362.html

作者: haha88999 时间: 2020-8-31 14:00
最新的版本我试了一早上了，自动播放就是有问题，没法自动切

作者: twt 时间: 2020-9-1 17:45
我坐着查了一天，播放不了

作者: admin 时间: 2020-9-1 21:18
还需要引入autoplay组件 https://swiperjs.com/react/

作者: 卿云渺渺 时间: 2020-12-22 16:52
import { Swiper, Pagination, Autoplay } from 'swiper'
// Install modules
Swiper.use([ Pagination, Autoplay])

作者: 韩涛 时间: 2021-2-1 16:11

世上没有一件工作不辛苦，没有一处人事不复杂。不要随意发脾气，谁都不欠你的。学会低调，取舍间必有得失，不用太计较。学着踏实而务实，越努力越幸运。当一个人有了足够的内涵和物质做后盾幸运飞艇，人生就会变得底气十足。

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)