swiper的基础使用（八）

最新推荐文章于 2024-01-09 11:18:34 发布

原创最新推荐文章于 2024-01-09 11:18:34 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #swiper #web前端 #框架 #移动

本文介绍如何使用Swiper插件实现自由滑动模式，即允许用户在任意位置停止翻页，无需对齐预设页面边界。通过设置freeMode属性为true即可启用此功能。

第一步，我们还是要创建一个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模式就是可以将翻页位置在任意位置停止。不再限制在页面当中