swiper的基础使用（二十八）

来源：互联网发布：图形图像设计软件编辑：程序博客网时间：2024/06/05 07:27

本次内容我们介绍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'就是将分页导航的样式变为分式导航。

1 0