swiper基础使用（八）

来源：互联网发布：雅思词汇书推荐知乎编辑：程序博客网时间：2024/04/28 13:13

这节课我们介绍swiper页面的free模式。

第一步，我们还是要创建一个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 class="swiper-slide">H5EDU 6<img src="logo.png"></div>                <div class="swiper-slide">H5EDU 7<img src="logo.png"></div>                <div class="swiper-slide">H5EDU 8<img src="logo.png"></div>                <div class="swiper-slide">H5EDU 9<img src="logo.png"></div>                <div class="swiper-slide">H5EDU 10<img src="logo.png"></div>            </div>            <div class="swiper-pagination"></div>        </div>

然后就要在初始化当中添加我们的free模式的属性了

<script>            var swiper = new Swiper('.swiper-container',{                pagination:'.swiper-pagination',                paginationClickable:true,                slidesPerView:3,                spaceBetween:30,                freeMode:true    //free模式开启            });        </script>

实现之后我们来观看效果，free模式就是可以将翻页位置在任意位置停止。不再限制在页面当中

0 0