Swiper-最好的移动触摸滑动插件:Swiper

文章目录

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

下载代码

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

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

使用方法

swiper支持纯jsjQuery两种方式

<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>

jQuery方式

<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/jquery.js"></script>
<script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>

html代码

<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<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>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>

CSS代码

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

js代码

<script>
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',
})
</script>

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

原文链接:Swiper-最好的移动触摸滑动插件:Swiper 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/swiper.html)

发表评论

请登录后发表评论:

1 Responses to “Swiper-最好的移动触摸滑动插件:Swiper”

  1. 仲夏的王国

    请问如何让iframe来回滑动切换呢~刚看到swiper

    登录回复