swiper的基礎使用（三）

首先按照第一堂課的內容，將一個基本的swiper頁面實現。
然後在初始化的js程式碼當中加入屬性。
 
當然事先不要忘記引用下載好的框架檔案。
我們先加入翻頁導覽的功能元件。方便我們確認頁面的垂直捲動，以及垂直捲動下導覽的樣式。

在外部容器當中加入翻頁導覽。

<div class="swiper-container">
<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>
<div class="swiper-pagination"></div>  //翻页导航的div
</div>
<script>
var swiper = new Swiper(&#39;.swiper-container&#39;,{
pagination:&#39;.swiper-pagination&#39;,   //绑定翻页导航
paginationClickable:true，        //设定可以点击翻页导航进行翻页
direction:&#39;vertical&#39;                //设定页面垂直翻页
});
</script>

這樣就可以使頁面進行垂直的滾動。

以上就是 swiper的基礎使用（三）的內容，更多相關內容請關注PHP中文網（www.php.cn）！