六，swipe框架 · 前端菜鸟成长记

[TOC] # swipe框架 ## 1。介绍 Swiper 是一款免费以及轻量级的**移动设备触控滑块**的js框架，主要是为IOS而设计的，同时，在Android、WP8系统以及PC端的浏览器也有着良好的用户体验。 ***** 官方网址 [https://www.swiper.com.cn/](https://www.swiper.com.cn/) ***** ### 1。1特点 1.轻量级，简洁高效，可定制性非常高； 2.横跨各种设备，兼容IOS/安卓/WP/PC端设备； 3.提供多种版本支持（可以自由选择jQuery/zepto版或者原生js版）； ### 1。2兼容性内部布局使用flex布局、是CSS3新增的布局方式。PC端不再考虑低版本浏览器。现在的版本是swiper4。 ## 使用步骤一。准备基本结构（**请注意：直接复制这里的代码，swiper严格要求布局和类名要使用它自己提供的，所以不能改动**） ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="swiper/swiper.css"> </head> <body> <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> <script src="swiper/swiper.js"></script> </body> </html> ``` 二。添加样式：（设置样式，不添加的话，默认等于父容器的宽度，高度为内容高度） ``` <style> *{padding: 0; margin: 0; border: 0; list-style: none;} .swiper-container{width: 600px; height: 400px; background:pink; margin:100px auto;} </style> ``` 三。创建Swipe对象 ``` <script> window.onload = function(){ var swiper = new Swiper('.swiper-container'); } </script> ```