<!--Container class for slider--> <div class = "swiper-container"> <!--Wrapper class for slider--> <div class = "swiper-wrapper"> <!--Slides--> <div class = "swiper-slide">Slide 1</div> <div class = "swiper-slide">Slide 2</div> <div class = "swiper-slide">Slide 3</div> ... other slides ... </div> <!--Define pagination, if it is required--> <div class = "swiper-pagination"></div> </div>
myApp.swiper(swiperContainer,parameters)
new Swiper(swiperContainer, parameters)
var mySwiper = app.swiper('.swiper-container', { speed: 400, spaceBetween: 100 });
var mySwiper = $('.swiper-container')[0].swiper; // Here you can use all slider methods like: mySwiper.slideNext();
S.No | Swiper 类型和描述 |
1 | 带分页的默认 Swiper
这是一个现代的触摸滑块,默认情况下,swiper 水平滑动。
|
2 | Vertical Swiper
这个也可以作为默认的swiper,但它是垂直滑动的。
|
3 | 在幻灯片之间留有空间
此滑动条用于在两张幻灯片之间留出空间。
|
4 | 多个 Swipers
此 swiper 在一个页面上使用多个 swiper。
|
5 | 嵌套 Swipers
它是垂直和水平幻灯片的组合。
|
6 | 自定义控件
用于自定义控件选择或滑动任何幻灯片。
|
7 | 延迟加载
可用于多媒体文件,加载时间较长。
|