轮播组件Swiper实现移动端网站的内容触摸滑动使用方法
2017-01-20 15:09
966 查看
Swiper使用方法
1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。(ctrl+鼠标左键跳到下载地址)<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body> ... <script src="path/to/swiper.min.js"></script> </body> </html>
如果你的页面加载了jQuery.js或者zepto.js,你可以选择使用更轻便的swiper.jquery.min.js。
<!DOCTYPE html> <html> <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>
2.HTML内容。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> 导航等组件可以放在container之外
3.你可能想要给Swiper定义一个大小,当然不要也行。
.swiper-container { width: 600px; height: 300px; }
4.初始化Swiper:最好是挨着</body>标签
<script> var mySwiper = new Swiper ('.swiper-container', { //自动播放 autoplay: 5000, //滑动方向,默认水平,vertical为垂直 direction: 'vertical', //循环播放 loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', }) </script> </body>
如果不能写在HTML内容的后面,则需要在页面加载完成后再初始化。
<script type="text/javascript"> window.onload = function() { ... } </script>
或者这样(Jquery和Zepto)
<script type="text/javascript"> $(document).ready(function () { ... }) </script>
例如我的html:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta name="wap-font-scale" content="no"/>
<meta name="renderer" content="webkit"/>
<meta name="applicable-device" content="mobile"/>
<link rel="stylesheet" href="/sites/mobile/css/index.css">
<script type="text/javascript" src="/sites/mobile/js/jquery.min.js"></script>
<link rel="stylesheet" href="/sites/mobile/css/swiper.min.css">
<title>月光如注</title>
</head>
<style>
.swiper-container {
width:100%;
}
.swiper-slide {
width:100%;
}
img{
width: 100%;
}
</style>
<script type="text/javascript">
window.onload = function() {
var mySwiper = new Swiper ('.swiper-container', {
autoplay: 5000,
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
})
}
</script>
<body>
<script type="text/javascript" src="/sites/mobile/js/swiper.min.js"></script>
<header>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="/sites/www/img/mobile_banner1.jpg"/>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="/sites/www/img/mobile_banner2.jpg"/>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="/sites/www/img/mobile_banner3.jpg"/>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="/sites/www/img/mobile_banner4.jpg"/>
</a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</header>
</body>
</html>
显示效果如下:
更多设置请参考:http://www.swiper.com.cn/api/index.html
相关文章推荐
- Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
- Swiper常用于移动端网站的内容触摸滑动
- Swiper常用于移动端网站的内容触摸滑动
- Swiper移动端网站的内容触摸滑动
- SwiperJS 插件 常用于移动端网站的内容触摸滑动
- Swiper常用于移动端网站的内容触摸滑动
- Swiper常用于移动端网站的内容触摸滑动
- 移动端触摸滑动插件swiper使用方法详解
- Swiper用于移动端网站的内容触摸滑动
- Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件
- Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件
- swiper-移动端网页触摸内容滑动js插件
- 利用Vue实现移动端图片轮播组件的方法实例
- 微信小程序使用swiper组件实现类3D轮播图
- vue2.0使用swiper组件实现轮播效果
- 使用Swiper开发移动端页面,轻松实现图片的轮播
- swiper动态改变滑动内容的实现方法
- 移动端网页触摸内容滑动js插件Swiper的使用(项目总结)
- swiper:前应用较广泛的移动端网页触摸内容滑动js插件
- Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件