查看: 20009|回复: 6
打印 上一主题 下一主题

swiper6无法自动轮播

[复制链接]

该用户从未签到

1

主题

2

帖子

10

积分

新手上路

Rank: 1

积分
10
跳转到指定楼层
楼主
发表于 2020-8-29 15:10:24 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
在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>
            )
    }
}


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

0

主题

2

帖子

4

积分

新手上路

Rank: 1

积分
4
沙发
发表于 2020-8-31 13:59:45 | 只看该作者
楼主别试了,建议降至4.1版本,就一切正常了https://www.swiper.com.cn/api/pagination/362.html
回复 支持 反对

使用道具 举报

该用户从未签到

0

主题

2

帖子

4

积分

新手上路

Rank: 1

积分
4
板凳
发表于 2020-8-31 14:00:18 | 只看该作者
最新的版本我试了一早上了,自动播放就是有问题,没法自动切
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

4

帖子

10

积分

新手上路

Rank: 1

积分
10
地板
发表于 2020-9-1 17:45:17 | 只看该作者
我坐着查了一天,播放不了
回复 支持 反对

使用道具 举报

  • TA的每日心情
    奋斗
    2017-10-14 22:14
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    83

    主题

    391

    帖子

    4万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    45180
    5#
    发表于 2020-9-1 21:18:31 | 只看该作者
    还需要引入autoplay组件     https://swiperjs.com/react/
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    5

    积分

    新手上路

    Rank: 1

    积分
    5
    6#
    发表于 2020-12-22 16:52:47 | 只看该作者
    import { Swiper, Pagination, Autoplay } from 'swiper'
    // Install modules
    Swiper.use([ Pagination, Autoplay])
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    无聊
    2021-2-1 16:10
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    3

    帖子

    10

    积分

    新手上路

    Rank: 1

    积分
    10
    7#
    发表于 2021-2-1 16:11:26 | 只看该作者

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

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-11-13 15:40 , Processed in 0.075726 second(s), 26 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表