Swiper The Most Modern Mobile Touch Slide是最具现代化的移动触屏滑块,你所知道的js幻灯片效果,js左右滚动效果,各种触屏切换效果等都是这个swiper js框架所实现的,只有你想不到,没有你做不到的,下面来看看swiper做出来的slide滑动效果。
swiper拇指画廊效果,如图。
swiper 3D翻转效果,如图。
还有很多很多功能效果,请登录swiper网站查看效果,看是否有你需求的那样。
swiper 中文网:http://www.swiper.com.cn/demo/index.html
swiper 英文网:http://idangero.us/swiper/demos/ 看不懂英文的,可以使用google浏览器翻译成中文
让我们开始Getting Started With Swiper做一个简单的helloworld默认功能吧!,如下这样的。
1:Download and install Swiper 下载并安装swiper框架。
1) We can download them from Swiper GitHub repository 我们可以登录到github里面下载所需要的swiper.min.js和swiper.min.css文件,然后引入到项目中
2)或者可以直接使用BootCDN从网络中直接加载swiper文件,如下。
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.0.1/css/swiper.min.css"> <script src="https://cdn.bootcss.com/Swiper/4.0.1/js/swiper.min.js"></script>
2:Include Swiper Files To Website/App 在我们的网页或app中引入js与css样式这两个文件,如下这样引入。
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body> ... swiper内容 <script src="path/to/swiper.min.js"></script> </body> </html>
3:Add Swiper HTML Layout 添加基本的swiper内容在body标签之间。
<body> <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> </body>
4:Swiper CSS Stlyes/Size 设置swiper显示的样式大小,例如。
<!-- slider内容样式,这是自定义的--> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .swiper-container { width: 600px; height: 300px; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically slide内部字体垂直居中 */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } </style>
5:Initialize Swiper 在js中初始化swiper,我们把js脚本写在<body>标签最后面,也就是</body>闭合标签之前。
<body> ...... swiper内容 <script> var mySwiper = new Swiper ('.swiper-container', { // 水平并不无限循环 direction: 'horizontal', loop: false, // If we need pagination 需要分页则添加 pagination: { el: '.swiper-pagination', }, // Navigation arrows 下一页,上一页 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // And if we need scrollbar 底部滑块 scrollbar:{ el: '.swiper-scrollbar', }, }) </script> </body>
经过上面五个步骤一初始化,它会显示出如下图的样式,因为我们添加了pagination分页,上一页,下一页以及底部滑块,这是比较完整的一个功能。
注意:如果你只想显示内容,如本文第三张swiper图片那样,而不显示上一页,下一页,底部滑块,以及pagination分页,则只需要简单初始化初始化,把第5个步骤的<script>里面的部分换一下。
jquery中初始化方法。
$(document).ready(function () { //初始化 var mySwiper = new Swiper ('.swiper-container', { // Optional parameters 水平显示,不无限循环, direction: 'horizontal', loop: false }) });
javascript中的初始化方法。
window.onload = function () { //初始化 var mySwiper = new Swiper ('.swiper-container', { // Optional parameters direction: 'horizontal', loop: false }) };
完毕!