new Swiper(swiperContainer, parameters)
用于初始化一个Swiper，返回初始化后的Swiper实例。Swiper7使用的默认容器是'.swiper'，Swiper6以下使用的是'.swiper-container'。
默认的容器类名一般不要删除，Swiper的默认样式是施加在该类名上的。
一个页面中引用多个Swiper，可以给每个容器加上ID或Class区分，要保留默认的类名.swiper。
HTML
默认的容器类名一般不要删除，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>var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');
var swiper3 = new Swiper('#swiper3');new Swiper(swiperContainer, parameters)信息
- 启用版本：
- 4.0.0
效果演示
效果中用css给slide设置了高度和背景色。
使用方法示例
从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>转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/start/new.html
下一篇：没有了