swiper是一個行動端的頁面滑動框架,我們可以使用這個框架來寫自己的履歷。
swiper當中除了頁面滑動意外,還提供了其他各種各樣的功能組件,供我們使用。
以及方法和回調函數。
我們先實作一個基本的swiper頁面,只有翻頁功能的頁面。
首先我們要先引用框架文件。 swiper.css 和 swiper.js
<link rel="stylesheet" href="swiper.css"> <script src="swiper.js"></script>
再建立一個外部容器。 swiper-cotainer
<div class="swiper-container">
然後在外部容器當中加入一個內部容器。 swiper-wrapper
<div class="swiper-wrapper">
在內部容器當中加入每一個翻頁頁面
<div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> </div> </div>
然後在其中進行初始化