文档章节

swiper的基础使用(五)

zhanyingwang
 zhanyingwang
发布于 2016/06/22 09:52
字数 349
阅读 16
收藏 0
点赞 0
评论 0

本文为H5EDU机构官方HTML5培训教程HTML5培训,swiper教程。本文主要介绍swiper框架的基本使用方法。

本节讲解如何让swiper页面分组显示。
有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。
 
第一步我们依然是编写一个基础的swiper页面。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">第一页</div>
                <div class="swiper-slide">第二页</div>
                <div class="swiper-slide">第三页</div>
                <div class="swiper-slide">第四页</div>
                <div class="swiper-slide">第五页</div>
                <div class="swiper-slide">第六页</div>
                <div class="swiper-slide">第七页</div>
                <div class="swiper-slide">第八页</div>
                <div class="swiper-slide">第九页</div>
                <div class="swiper-slide">第十页</div>
            </div>
        </div>

然后在js当中进行页面的初始化并且添加属性,为了观看效果更佳。
我们在页面当中添加了slide的间隙。

<script>
            var swiper = new Swiper('.swiper-container',{
                slidesPerView:3,   //页面分组显示,这里显示为3组
                spaceBetween:30   //slide间隙
            });
        </script>

当然不要忘记引用我们的框架文件,这样运行我们的页面就会发现我们的页面在当前屏幕当中会显示一组。

 

点击进入swiper教程:http://11731999.blog.51cto.com/11721999/1791249

 

© 著作权归作者所有

共有 人打赏支持
zhanyingwang
粉丝 4
博文 66
码字总数 28707
作品 0
东城
微信小程序(五):轮播

本文讲轮播的实现,部分内容来源于官方文档,增加了笔者实际操作中的一些问题与经验。 本文基于微信小程序公测版,IDE:微信开发者工具 0.10.102800 组件 swiper 微信小程序原生就提供了轮播...

u010635353 ⋅ 2016/11/14 ⋅ 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

微信小程序电商系统省市区选择器(二)

通过本文可以读到: 省级上下滚动展示scroll-view基本用法 省市级之间左右滑动展示swiper基本用法 data-index传值方法,wx:for循环语句、wf:if条件判断语句写法 先看下最终效果: 一、scrol...

秀杰 ⋅ 2016/12/27 ⋅ 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 21分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 23分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 27分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 31分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 32分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 32分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 33分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 39分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 42分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 47分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部