Swiper new Swipe(实例化) - new Swiper(swiperContainer, parameters)

用于初始化一个Swiper,返回初始化后的Swiper实例。Swiper7使用的默认容器是'.swiper',Swiper6以下使用的是'.swiper-container'。
默认的容器类名一般不要删除,Swiper的默认样式是施加在该类名上的。
参数名 类型 是否必填 描述
swiperContainer HTMLElement or string 必选 Swiper容器的css选择器,例如".swiper"
parameters object 可选 Swiper的个性化配置

一个页面中引用多个Swiper,可以给每个容器加上ID或Class区分,要保留默认的类名.swiper。
HTML
<div class="swiper" id="swiper1">....</div>
<div class="swiper" id="swiper2">....</div>
<div class="swiper" id="swiper3">....</div>
JS
var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');
var swiper3 = new Swiper('#swiper3');

new Swiper(swiperContainer, parameters)信息

  • 启用版本:

  • 4.0.0

效果演示

效果中用css给slide设置了高度和背景色。

slider1
slider2
slider3

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>
var mySwiper = new Swiper('.swiper', {
  autoplay: true,//可选选项,自动滑动
})

//如果你初始化时没有定义Swiper实例,后面也可以通过Swiper的HTML元素来获取该实例
new Swiper('.swiper')
var mySwiper = document.querySelector('.swiper').swiper
mySwiper.slideNext();
</script>