查看: 1635|回复: 3
打印 上一主题 下一主题

swiper6 无法自动录播图片

[复制链接]

该用户从未签到

1

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
跳转到指定楼层
楼主
发表于 2020-10-12 13:09:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
autoplay设置为:true,可以用鼠标滑动轮播,但是无法自动轮播,请大佬指教,下面是代码

<!-- HTML代码 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide_item" style="background-color: #42b983">slider1</div>
        <div class="swiper-slide slide_item" style="background-color: aqua">slider2</div>
        <div class="swiper-slide slide_item" style="background-color: red">slider3</div>
      </div>
  </div>

<!-- 引入组件、样式 ->
import Swiper from 'swiper'
import 'swiper/swiper-bundle.min.css';

<!-- js代码 -->
  mounted() {
    setTimeout(()=>{
      new Swiper(".swiper-container", {
        autoplay: true,
        speed: 800,
        loop: true,
      })
    },300)
  },

/* CSS样式 */
.swiper-container {
  width: 600px;
  height: 300px;
}
.slide_item {
  width: 100%;
  object-fit: cover;
  height: 200px;
  text-align: center;
  font-size: 36px;
}
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

0

主题

3

帖子

5

积分

新手上路

Rank: 1

积分
5
沙发
发表于 2020-12-22 16:53:19 | 只看该作者
注册模块
import { Swiper, Pagination, Autoplay } from 'swiper'
// Install modules
Swiper.use([ Pagination, Autoplay])
回复 支持 反对

使用道具 举报

  • TA的每日心情
    开心
    2020-12-15 10:30
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    17

    帖子

    43

    积分

    新手上路

    Rank: 1

    积分
    43
    板凳
    发表于 2020-12-26 16:51:39 | 只看该作者
    各种图片滚动/无缝滚动/文字滚动/跑马灯效果/导航/手风琴效果/轮播https://www.yujianni.top/news/comp_artinfo.html?id=55
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    擦汗
    2017-12-25 11:26
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    3

    帖子

    25

    积分

    新手上路

    Rank: 1

    积分
    25
    地板
    发表于 2021-2-2 15:35:19 | 只看该作者
    各种图片滚动/无缝滚动/文字滚动/跑马灯效果/导航/手风琴效果/轮播https://www.yujianni.top/news/comp_artinfo.html?id=55
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2024-4-24 15:02 , Processed in 0.079969 second(s), 26 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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