H5W3
当前位置:H5W3 > 其他技术问题 > 正文

Vue使用vue-awesome-swiper 某些配置无效

包版本

swiper 版本:6.1.1
vue-awesome-swiper 版本 4.1.1

使用官方提供的使用方式,在配置autoplay这一项时无法实现自动播放效果,其他的配置项就可以。

配置项代码如下,loop和speed等皆可以正常运行,唯独autoplay项无论是设置为true皆不可正常自动播放。

已经找过网上的资源,没能解决。

swiperOption: {
                    // 如果需要分页器
                    pagination: {
                        el: ".swiper-pagination",
                    },
                    initialSlide :0,    // 初始值
                    speed:2000,
                    autoplay: {
                        delay: 500,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    loop:true,          // 闭环播放
                  
                },
            }

回答:

试试把swiper的本版 降到4x 我本来swiper的版本跟你一样,我的是 上一页 下一页不起作用,然后分页器出不来,版本降了一下就好了。

回答:

swiper 版本:6.1.1
引入Swiper6.X时需要添加以下的代码

import Swiper2, { Navigation, Pagination, EffectFade, Autoplay } from 'swiper'
Swiper2.use([Navigation, Pagination, EffectFade, Autoplay])

可以在导出swiper的文件swiper.d.ts中看到

export default Swiper;
export {
  Swiper,
  SwiperOptions,
  A11y,
  Autoplay,
  Controller,
  EffectCoverflow,
  EffectCube,
  EffectFade,
  EffectFlip,
  HashNavigation,
  History,
  Keyboard,
  Lazy,
  Mousewheel,
  Navigation,
  Pagination,
  Parallax,
  Scrollbar,
  Thumbs,
  Virtual,
  Zoom,
};

所以需要哪些模块就手动引入哪些模块,第一行的代码就引入了分页器、自动滚动和Fade的切换效果。

本文地址:H5W3 » Vue使用vue-awesome-swiper 某些配置无效

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址