使用元素

涉及知识点: 轮播图

1. 插入元素

在元素列表中搜索“轮播图”元素并插入。

2. 设置相关属性

效果说明:

coverflow：3D立体效果

效果详情json:

coverflow部分：

• rotate：设置幻灯片做3d旋转时Y轴的旋转角度，比如：设置为30，那么幻灯片在旋转时，Y轴旋转的角度为30
• stretch：设置幻灯片之间的拉伸值，设置的值越大。幻灯片靠得越紧
• depth：设置幻灯片的位置深度,设置的值越大，z轴距离越远，看起来越小
• modifier：设置depth和rotate和stretch的倍率,，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显
• slideShadows：是否开启幻灯片阴影默认值为：true 设置为false，关闭幻灯片阴影
• grabCursor：捕捉光标成手掌状，值为true或false
• centeredSlides：值为true或false，为真，那么活动块会居中，而非默认状态下的居左
• slidesPerView：旋转模式下，设置slider's容器能够同时显示的slides数量。另外，支持'auto'值，会根据容器container的宽度调整slides数目。‘auto’不兼容loop模式

3. 元素class为“swiper-slide”的DIV表示轮播的一个内容区，内容可任意编辑，每一个轮播内容区对应一个class为"swiper-slide"的div，如果多个内容轮播则制作多个div。

4. 如需数组绑定，需要绑定在元素class为“swiper-wrapper”的DIV上

5. 如需设置轮播图的大小，需要在样式类文件中添加如下样式类

.swiper-container {
    width: 600px;
    height: 300px;
}

6. 如需设置pagination当前激活页小圆点颜色，需要在样式类文件中添加如下样式类

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff;
}