这节课我们介绍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模式就是可以将翻页位置在任意位置停止。不再限制在页面当中
以上就是swiper基础使用（八）的内容，更多相关内容请关注PHP中文网（www.php.cn）！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
899
收藏
