html swiper滑动,Swiper.js 移动触摸滑动插件使用教程

最近在使用的一个移动触摸滑动插件Swiper，功能很强大，跟之前的那个swipe.js相比，同时支持在PC端滑动，支持上下方向滑动，支持多张图片滑动，支持多屏滑动，凡是你想得到的几乎都可以实现。最近作者还更新了3.0版本，优先支持IOS和最新版的Android移动端。

下载代码

可以在github上下载：https://github.com/nolimits4web/Swiper/

或者有bower的，直接安装 $ bower install swiper

使用方法

swiper支持纯js和jQuery两种方式

...

...

jQuery方式

...

...

HTML代码

Slide 1

Slide 2

Slide 3

...

CSS代码

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

js代码

var mySwiper = new Swiper ('.swiper-container', {

// Optional parameters

direction: 'vertical',

loop: true,

// If we need pagination

pagination: '.swiper-pagination',

// Navigation arrows

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

// And if we need scrollbar

scrollbar: '.swiper-scrollbar',

})

jQuery代码

$(document).ready(function () {

//initialize swiper when document ready

var mySwiper = new Swiper ('.swiper-container', {

// Optional parameters

direction: 'vertical',

loop: true

})

});

演示案例

左右滑动 上下滑动 app滑动 swiper官方网站 swiper的github