common/src/components/frame/swiper-frame.md

组件文档说明

下载依赖

npm install vue-awesome-swiper --save

npm install swiper@5.3.6 --save

options设置

1

切换效果 fade cube coverflow flip effect: 'flip', 样式设定 fadeEffect: { 淡出fade crossFade: true, 方块切换 cube slideShadows: true, shadow: true, shadowOffset: 100, shadowScale: 0.6, coverflow slidesPerView: 3, centeredSlides: true, coverflowEffect: { rotate: 30, stretch: 10, depth: 60, modifier: 2, slideShadows: true, }, flip slideShadows: true, limitRotation: true, },

2

不可拖动文字 noSwiping: true,

3

当你的Swiper在过渡时将无法滑动 preventInteractionOnTransition : true, 短切换，长切花 shortSwipes: false, 自由滑动，不知道滑过几个 freeMode: true,

4

设置预览值 px slidesOffsetBefore: 100, 显示多行 slidesPerView: 3, //一行显示3个 slidesPerColumn: 2, //显示2行

5

一页显示三个，一组为三个 slidesPerView: 3, slidesPerGroup: 3,

6

slidesPerView: 2, //slidesPerView : 'auto', 根据slide的宽度自动调整展示数量。此时需要设置slide的宽度，如下style所示 //slidesPerView : 3.7,

7

默认居中，并一页显示三个，第一条在左侧 slidesPerView: 3, centeredSlides: true, centeredSlidesBounds: true,

8

默认居中，并一页显示三个，第一个在中间 slidesPerView: 3, centeredSlides: true,

9

如果有一个数据时，所有分页，按钮，分页点全部失效 watchOverflow: true,

10

滑过触发回调 runCallbacksOnInit: true, on: { slideChangeTransitionStart: function() {

选中值
console.log(this.activeIndex);

}, },

11

自适应高度 随silde变化而变化 autoHeight: true,

12

默认一页显示数 slidesPerView: 4, 数据间隔 px spaceBetween: 30, 不同屏幕配置 breakpoints: { 320: {

//当屏幕宽度大于等于320
slidesPerView: 2,
spaceBetween: 10,

}, 768: {

//当屏幕宽度大于等于768
slidesPerView: 3,
spaceBetween: 20,

}, 1280: {

//当屏幕宽度大于等于1280
slidesPerView: 4,
spaceBetween: 30,

}, },

13

鼠标滑过显示小手 grabCursor: true,

14

自动滑过贴合时间 speed: 300, autoplay: { 默认3秒切换一次 delay: 3000, 到最后一个自动停止 stopOnLastSlide: true, 触碰当前页自动停止 disableOnInteraction: true, 反向自动轮播 reverseDirection: true, },

15

自动滑过 autoplay: true, //鼠标覆盖停止自动切换

16

默认索引值，0：开始 initialSlide: 0,

17

垂直切换选项 direction: 'vertical',

18

循环轮播 loop: true,

19

分页 pagination: { el: '.swiper-pagination', clickable为true时，点击小点控制轮播 clickable: true, 分页类型 type: 'bullets',//点 type: 'fraction',//数字 type: 'progressbar',//上条 type: 'custom', //自定义 progressbarOpposite: true,//progressbar-左条 bulletElement: 'li',//指定标签 dynamicBullets: true,//bullets-点数过多，隐藏 dynamicMainBullets: 4,//显示点数量 hideOnClick: true,//点击数据时，隐藏分页 自定义点样式 renderBullet: function(index, className) { return '' + (index + 1) + ''; }, 设置分式 type: 'fraction', renderFraction: function(currentClass, totalClass) { return '' + ' of ' + ''; }, 自定义点样式 type: 'custom', renderCustom: function(swiper, current, total) { return current + ' of ' + total; }, bulletClass: 'my-bullet', //需设置.my-bullet样式 bulletActiveClass: 'my-bullet-active', //需设置my-bullet-active样式 },

20

按钮导航 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },