六，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> ```