Swiper组件列表

模块	功能	版本
Navigation	按钮
Pagination	分页器
Scrollbar	滚动条
Autoplay	自动切换
FreeMode	自由模式	7.0.0
Grid	网格分布	7.0.0
Manipulation	动态操纵	7.0.0
Parallax	视差效果
Lazy	延迟加载图片
EffectFade	渐变过渡
EffectCoverflow	行进翻转过渡
EffectFlip	翻转过渡
EffectCube	方块过渡
EffectCards	卡片过渡	7.0.0
EffectCreative	创意性过渡	7.0.0
Thumbs	缩略图	4.4.1
Zoom	缩放
Keyboard	键盘
Mousewheel	鼠标
Virtual	虚拟块
HashNavigation	锚导航
History	历史导航
Controller	双向控制
A11y	障碍使用辅助

navigation按钮

使用前进后退按钮。

navigation参数

• 类型：

  object

• 启用版本：

  4.0.0

使用方法示例

var mySwiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

pagination分页器

使用分页导航。

pagination参数

• 类型：

  object

• 启用版本：

  4.0.0

使用方法示例

<div class="swiper-pagination"></div>
<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
pagination: {
    el: '.swiper-pagination',
  },
})
</script>

Autoplay自动切换

设置为true启动自动切换，并使用默认的切换设置。

要注意Swiper4.x与Swiper3.x的写法不同导致的超快速切换。
当页面文档不在当前视窗显示时（浏览器tab），Swiper会停止自动切换，显示时会恢复自动切换（Swiper5新增）。

autoplay信息

• 类型：

  object/boolean

• 默认：

  false

• 举例：

  true/object

• 启用版本：

  4.0.0

使用方法示例

从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。

<script>
var mySwiper = new Swiper('.swiper', {
  autoplay:true,//等同于以下设置
  /*autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },*/
});
</script>

scrollbar滚动条

为Swiper增加滚动条。

scrollbar参数

• 类型：

  object

• 启用版本：

  4.0.0

使用方法示例

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-scrollbar"></div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
  scrollbar: {
    el: '.swiper-scrollbar',
  },
}); 
</script>