swiper的基础使用（二十八）

本次内容我们介绍swiper的分式导航，可以改变导航的样式。

首先还是搭建一个基础的swiper页面。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

然后到JS当中初始化。使其可以进行翻页，和添加各种组件

 var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                nextButton:'.swiper-button-next',
                prevButton:'.swiper-button-prev',
                paginationType:'fraction'
            });

其中paginationType:'fraction'就是将分页导航的样式变为分式导航。