swiper4.0配置

发表于 | 更新于

swiper4.0常用配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
    slidesPerView: "auto", // 宽度自适应
    spaceBetween: 30, // 间隙
    centeredSlides: true, // 居中显示
    updateOnWindowResize: true, // 监听屏幕尺寸
    slideToClickedSlide: true, // 点击自动居中
    autoplay: {
      delay: 3000, // 延迟时间
      disableOnInteraction: false // 用户操作后不停止播放
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    speed: 1000, // 速度
    // loop: true, // 最后一页事件不能绑定
    // initialSlide: this.pageIndex, // 默认页面
    direction: "horizontal", // 垂直滚动
    // 注意不要跟 vue-router 的 hash 模式冲突了, 两者不可共用
    // hashNavigation: {
    //   replaceState: true, // 翻页不产生历史记录
    //   watchState: true,
    // },
    hashNavigation: false,
    observer: true, // 子元素发生变化自动初始化swiper
    observeParents: true, // 父元素发生变化自动初始化swiper
    on: {
      init() {
        // 初始化
      },
      slideChangeTransitionEnd() {}, // 页面切换完成
      slideChange() {
        console.log(this.realIndex); // 当前轮播页面
      },
      resize() {
        // 页面宽度改变
      }
    }
  };

禁用swiper拖动事件：

添加class swiper-no-swiping

匀速滚动

1
2
3
4
freeMode:true,
autoplay: {
    delay:0
}
1
2
3
4
5
6
7
8
.swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: linear; /*之前是ease-out*/
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    margin: 0 auto;
}

swiper官网网站