文档章节

swiper基础使用(八)

zhanyingwang
 zhanyingwang
发布于 2016/06/27 09:43
字数 256
阅读 7
收藏 0

本文为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

© 著作权归作者所有

共有 人打赏支持
zhanyingwang
粉丝 4
博文 66
码字总数 28707
作品 0
东城
私信 提问
移动端触摸滑动插件Swiper使用指南

Swiper是一款开源、免费、功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4。Swiper主要面向的是手机、平板电脑等移动设备,帮助开发者轻松实现触屏焦点图、触屏Tab切换、触屏...

zhangyin88
07/16
0
0
Swiper插件分页器使用

引入swiper.min.css 引入query.min.js 和swiper.min.js 分页器以及轮播的一般样式引用

大眼睛猫
2017/11/15
0
0
关于VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使用的比较频繁的插件,现在分享一下使用方法以及开发中会遇到...

littleyu
01/11
0
0
AngularJS 中使用Swiper制作滚动图不能滑动

Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swipe...

冷冷gg
2016/11/15
405
0
Angular中使用Swiper

项目使用的Angular版本是V6.0.3 安装Swiper npm install swiper --save 或者 yarn add swiper --save 在angular.json文件添加swiper.js和swiper.css 安装模组定义档 npm install @types/swi......

小略子
07/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

11月NEO技术社区开发进展汇总

为了帮助大家了解NEO平台上技术社区的开发进展,NEONewsToday将每月发布一份值得关注的更新报告。这些报告将包括对NEO核心项目的贡献以及对社区创建项目的改进。 这个报告不是包括所有项目进...

NEO-FANS
13分钟前
2
0
flutter FlatButton有间隔

这个按钮上下会有空隙,不是铺满的

大灰狼wow
16分钟前
2
0
WiFi攻击的三种方式

WiFi的安全问题已经引起了不少的使用者重视,甚至已经出现草木皆兵的现象。那么黑客到底是如何做到绕过身份验证来获取WiFi使用权的呢?主要有以下三种方式,其中最后一种方式十分简单。 WiFi...

Linux就该这么学
18分钟前
2
0
添加并发

<!-- 认购线程池,支持最大并发送10 最大排队队列为一万--> <task:executor id="investBuyPool" pool-size="1-10" queue-capacity="10000"/> 方法添加注解@Async("investBuyPool")......

一夜
28分钟前
2
0
Gensim?

Gensim是一款开源的第三方Python工具包,用于从原始的非结构化的文本中,无监督地学习到文本隐层的主题向量表达。它支持包括TF-IDF,LSA,LDA,和word2vec在内的多种主题模型算法,支持流式训...

火力全開
41分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部