关于swiper常用参数总结
本文最后更新于 704 天前,其中的信息可能已经有所发展或是发生改变。

Swiper 是目前应用较广泛的移动端网页触摸内容滑动js插件。不需要自己去重复造轮子使用方便,节省时间精力还做到了非常好的兼容。把常用到的参数总结如下,方便日后需要查看:

一次显示多个slides

demo演示

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,  // 显示的数目
      spaceBetween: 30,  // 元素之间的距离
});

循环效果

demo演示

var swiper = new Swiper('.swiper-container', {
  loop: true,  // 循环轮播
});

自动播放

demo演示

var swiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 2500,  // 循环时间
    disableOnInteraction: false, // 用户操作swiper之后,是否禁止autoplay]。默认为true:停止。
  },
});

切换样式

slide的切换效果
默认为"slide"(位移切换),可设置为'slide'(普通切换、默认)
"fade"(淡入)
"cube"(方块)
"coverflow"(3d流)
"flip"(3d翻转)。

var swiper = new Swiper('.swiper-container', {
  effect : 'fade',
});

左右切换按钮

<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
// 左右按钮
navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
},

按钮样式自定义

/* 按钮样式自定义 */
.swiper-container{
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 80px;/* 设置按钮大小 */
}

弹性切换

// 弹性切换
speed: 1000,

可以自定义 改变Swiper切换的时间曲线

/* 改变Swiper切换的时间曲线 */
.swiper-wrapper{
    /* transition-timing-function: ease-in-out; */
    /* transition-timing-function: ease-out; */
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

分页器

<!-- Add Pagination -->
<div class="swiper-pagination"></div>
 .swiper-container{
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;/* 两种都可以 */
  }
// 分页器
pagination: {
    el: '.swiper-pagination',
     type: 'bullets',
    //type: 'fraction',
    //type : 'progressbar',
    //type : 'custom',
},

type 值改变分页器样式

分页器样式类型,可选
‘bullets’ 圆点(默认)
‘fraction’ 分式
‘progressbar’ 进度条
‘custom’ 自定义

分页器 / 动态指示点

pagination: {
    el: '.swiper-pagination',
    dynamicBullets: true,
},

自定义指示器

el: '.swiper-pagination',
    clickable: true,    // 此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },

滚动条

scrollbar: {
    el: '.swiper-scrollbar',
    hide: true,
},

触摸比例

触摸比例。触摸距离与slide滑动距离的比率。
可以解决一直滑动多个 slide 的问题
https://www.swiper.com.cn/api/touch/55.html

touchRatio : 0.1,

渲染分页器小点

渲染分页器小点。这个参数允许完全自定义分页器的指示点。接受指示点索引和指示点类名作为参数。
可以自定义分页的文字等
https://www.swiper.com.cn/api/pagination/70.html

var swiper = new Swiper('.swiper-container', {
  pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
     /* renderBullet: function (index, className) {
          switch(index){
            case 0:text='壹';break;
            case 1:text='贰';break;
            case 2:text='叁';break;
            case 3:text='肆';break;
            case 4:text='伍';break;
          }
          return '<span class="' + className + '">' + text + '</span>';
        },*/
  },
});  
标题:关于swiper常用参数总结
地址:https://xiaodongxier.com/347.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇