文档章节

swiper基础使用(八)

zhanyingwang
 zhanyingwang
发布于 2016/06/27 09:43
字数 256
阅读 7
收藏 0
点赞 0
评论 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.min.css 引入query.min.js 和swiper.min.js 分页器以及轮播的一般样式引用

大眼睛猫 ⋅ 2017/11/15 ⋅ 0

AngularJS 中使用Swiper制作滚动图不能滑动

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

冷冷gg ⋅ 2016/11/15 ⋅ 0

关于VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

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

littleyu ⋅ 01/11 ⋅ 0

Swiper v4.0.1 发布,支持硬件加速的触摸滑动库

Swiper v4.0.1 已发布,Swiper 是移动端使用的触摸滑动的一个开源库,可应用于移动网站、Web App、Native APP 和混合类 APP,支持硬件加速。 Swiper 专为 iOS 设计,但也支持 Android、Windo...

王练 ⋅ 2017/10/12 ⋅ 1

商品促销倒计时效果实现

效果图展示 这里写图片描述 所有的知识点总结如下: 轮播图实现:swiper插件 倒计时功能的实现 倒计时结束,抢购按钮变为可点击状态 轮播图的实现 swiper插件:开源,免费,强大的移动端触摸...

云焱 ⋅ 2017/12/03 ⋅ 0

8.轮播图组件及vue-awesome-swiper的引入(手把手教你用vue+node+mongodb搭建一个小商城)

GitHub:https://github.com/Ewall1106/mall 一、新建home.vue 1、上篇我们为了便于展示,把头部组件放在了页面,现在我们删掉里面的头部组件然后我们在view文件里面新建一个页面,然后把头部...

Ewall_ ⋅ 05/30 ⋅ 0

H5页面中的视频轮播(类似于banner轮播图效果)

先说下我的需求,如下图: 手机模型中间部分是视频播放,当一条视频播放完毕后,整屏会自动上滑切换到下一个视频。 详细效果展示请在PC端点击:http://www.17jianyue.cn/ 查看 提起轮播,我们...

guoxiaodi001 ⋅ 2017/05/12 ⋅ 0

swiper.js-全屏动画切换效果实现

针对swiper.js的全屏动画切换,我们已经简单分析和介绍过一次: http://my.oschina.net/u/2352644/blog/487902 这个里面非常简单的分析了如何加入我们的动画效果,swiper现在已经出现了3.0版...

透笔度 ⋅ 2016/02/15 ⋅ 0

编写第二个页面:新闻阅读列表页面

笔记内容:编写第二个页面:新闻阅读列表页面笔记日期:2018-01-06 使用Swiper组件构建轮播图 关于Swiper组件的官方描述文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper....

ZeroOne01 ⋅ 01/07 ⋅ 0

JS三教九流系列-swiper.js-搭建微信、手机端全屏广告效果

swiper.js http://www.swiper.com.cn/ 官方网站,下载的类库和要用那些api我们都需在这里查找 http://www.swiper.com.cn/demo/senior/index.html各种效果,我们要做的就是这种 我们简单发现,...

透笔度 ⋅ 2015/08/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何使用serverchan微信推送告警

之前实现推送告警信息到微信的方法有如下几种: 1、通过企业公众号实现----收费: 2、通过QQ邮箱,在微信平台上开启收到邮件进行提醒; 3、第三方告警平台API,一般也是收费的; 不过最近看文...

问题终结者 ⋅ 33分钟前 ⋅ 0

TCP的RPC

RPC就是远程方法调用(Remote Process Call ),包含了客户端和服务端,涉及了对象的序列化传输。 1.服务端启动,注册远程调用的类2.客户端发送请求信息包含类、方法、参数的一些信息、序列化传...

Cobbage ⋅ 54分钟前 ⋅ 0

IOS-UI UI初步代码布局添加事件

ISO开发界面,UI是必须学习的一部分,其实很早之前想学来了,一直没有沉下心来学习。看到IOS的代码风格和布局就别扭的不行,跟java代码和android布局比较显得不是那么方便,所以一直到现在。...

京一 ⋅ 今天 ⋅ 0

浅谈OpenDaylight的二次开发

OpenDaylight作为一款开源SDN网络控制器,依托于强大的社区支持以及功能特性,成为了目前主流的SDN网络控制器开发平台。在比较稳定的OpenDaylight Helium版本中,已经为开发者提供了大量的网...

wangxuwei ⋅ 今天 ⋅ 0

API 开发中可选择传递 token 接口遇到的一个坑

在做 API 开发时,不可避免会涉及到登录验证,我使用的是jwt-auth 在登录中会经常遇到一个token过期的问题,在config/jwt.php默认设置中,这个过期时间是一个小时,不过为了安全也可以设置更...

等月人 ⋅ 今天 ⋅ 0

Java NIO之文件处理

程序要操作本地操作系统的一个文件,可以分为以下三个部分: 对文件位置的操作 对文件的操作 对文件内容的操作 其中,对文件内容的操作在 Java NIO之Channel 中已经有了介绍,通过FileChann...

士别三日 ⋅ 今天 ⋅ 0

Maven的pom.xml配置文件详解

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.......

小海bug ⋅ 今天 ⋅ 0

解决httpclient超时设置不生效的问题

最近公司有项目需要通过http调用第三方服务,且第三方服务偶有超时,故需要设置一定的超时时间防止不响应的情况出现。 初始设置如下: [java] view plain copy //超时设置 RequestConfig re...

Mr_Tea伯奕 ⋅ 今天 ⋅ 0

过滤器Filter和拦截器HandlerInterceptor

过滤器 依赖于servlet容器。在实现上基于函数回调,可以对几乎所有请求进行过滤,但是缺点是一个过滤器实例只能在容器初始化时调用一次。使用过滤器的目的是用来做一些过滤操作,获取我们想要...

hutaishi ⋅ 今天 ⋅ 0

Redis入门详解(转)

Redis入门详解 Redis简介 Redis安装 Redis配置 Redis数据类型 Redis功能 持久化 主从复制 事务支持 发布订阅 管道 虚拟内存 Redis性能 Redis部署 Redis应用场景 Redis总结 Redis简介: Redi...

xiaoyaoyoufang ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部