最好的移动触摸滑动插件:Swiper
2024-10-14 03:24:10
最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现。最近作者还更新了3.0版本,优先支持ios和最新版的Android移动端。
下载代码
可以在github上下载:https://github.com/nolimits4web/Swiper/
或者有bower的,直接安装 $ bower install swiper
使用方法
<!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
})
});
最新文章
- jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
- python---IO多路复用
- PDO 学习与使用 ( 一 ) :PDO 对象、exec 方法、query 方法与防 SQL 注入
- floor舍去法取整
- 高效Count
- git引用^和~的区别
- POJ2103 Jackpot
- linux下使用mutt发送带附件的邮件
- 使用httpclient抓取时,netstat 发现很多time_wait连接
- 如何将经纬度利用Google Map API显示C# VS2005 Sample Code
- SourceTree使用方法介绍
- Redis 数据结构与内存管理策略(上)
- js 获取二级域名
- 一个简单的java程序,用于RabbitMQ日志监控
- 移动端根元素(html)的设置
- vue自学入门-3(vue第一个例子)
- Runloop的再学习之浅析(一)
- 解决web项目存在多个log4j.properties配置文件,导致日志级别配置不生效问题
- c# GC 新典型
- Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决