侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

swiper基础使用(八)

2024-05-14 星期二 / 0 评论 / 0 点赞 / 81 阅读 / 1978 字

本文为H5EDU机构官方的HTML5培训教程swiper教程这节课我们介绍swiper页面的free模式。 第一步,我们还是要创建一个swiper的基础页面。 <div class="swiper-

本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍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强化教程:http://h5edu.cn/htm/step/h5edu_893.html

广告 广告

评论区