一、Swiper-Wrapper样式设置
1. Container
Swiper外层包裹元素的样式设置。
.swiper-container { width: 100%; height: 100%; ... }
2. Wrapper
Swiper-Wrapper包裹层的样式设置。
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; ... }
3. Slide
每个滑动元素的样式设置,可以通过swiper-slide类名来定位。
.swiper-slide { position: relative; width: 100%; height: 100%; ... }
二、Swiper-Wrapper属性配置
1. Direction
定义Swiper-Wrapper的滑动方向,包括水平(horizontal)和垂直(vertical)两种模式。
var swiper = new Swiper('.swiper-container', { direction: 'horizontal', ... });
2. Speed
定义Swiper-Wrapper的滑动速度,单位为毫秒,默认值为300。
var swiper = new Swiper('.swiper-container', { speed: 1000, ... });
3. SlidesPerView
定义Swiper-Wrapper中同时可见的滑动元素数目,可以设置为整数或者'auto'。
var swiper = new Swiper('.swiper-container', { slidesPerView: 'auto', ... });
4. SpaceBetween
定义Swiper-Wrapper中相邻滑动元素之间的距离,单位为像素。
var swiper = new Swiper('.swiper-container', { spaceBetween: 30, ... });
三、Swiper-Wrapper使用示例
1. 基本示例
Swiper-Wrapper的基本使用示例:
var swiper = new Swiper('.swiper-container', { ... });
2. 动态添加和删除Slide
Swiper-Wrapper支持动态添加和删除Slide:
//动态添加 swiper.appendSlide(''); //动态删除 swiper.removeSlide(1);
3. Swiper-Wrapper事件
Swiper-Wrapper支持丰富的事件,本例展示其中两种:slideChange和slideNextTransitionEnd。
var swiper = new Swiper('.swiper-container', { ... on: { slideChange: function () { console.log('slideChange'); }, slideNextTransitionEnd: function () { console.log('slideNextTransitionEnd'); }, }, });
4. Swiper-Wrapper懒加载
Swiper-Wrapper支持图片懒加载,可以通过data-src设置图片的真实路径。
var swiper = new Swiper('.swiper-container', { ... lazy: { loadPrevNext: true, }, });
5. Swiper-Wrapper自定义分页器
Swiper-Wrapper支持自定义分页器,可以通过swiper-pagination类名定位。
以上就是Swiper-Wrapper的完整解析,包括样式设置、属性配置和使用示例等方面的内容。如果您需要使用滑动组件,Swiper-Wrapper是不错的选择。var swiper = new Swiper('.swiper-container', { ... pagination: { el: '.swiper-pagination', }, });