swiper是一個行動端的頁面滑動框架,我們可以使用這個框架來寫自己的履歷。
swiper當中除了頁面滑動意外,還提供了其他各種各樣的功能組件,供我們使用。
以及方法和回調函數。
我們先實作一個基本的swiper頁面,只有翻頁功能的頁面。
首先我們要先引用框架文件。 swiper.css 和 swiper.js
1 2 | < link rel = "stylesheet" href = "swiper.css" >
< script src = "swiper.js" ></ script >
|
登入後複製
再建立一個外部容器。 swiper-cotainer
1 | < div class = "swiper-container" >
|
登入後複製
然後在外部容器當中加入一個內部容器。 swiper-wrapper
1 | < div class = "swiper-wrapper" >
|
登入後複製
在內部容器當中加入每一個翻頁頁面
1 2 3 4 5 6 7 8 | < 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 >
|
登入後複製
然後在其中進行初始化
相關內容請關注PHP中文網(m.sbmmt.com)!