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://h5edu.cn/htm/step/h5edu_893.html

时间: 2024-10-11 09:43:31

swiper的基础使用(五)的相关文章

swiper的基础使用(九)

本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的多行显示. 第一步,我们还是要创建一个swiper的基础页面.不过这次我们要多创建一些slide. <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">第一页</div> <div

Android核心基础第五天

一.学习目标及要求 课程目标 课程内容(必须讲的内容,就是讲课的知识点的顺序) * 掌握Activity 配置 * 掌握 Intent 显示意图 * 掌握 Intent 隐式意图 * 掌握两种意图的使用场景 * 掌握 activity 开启的数据传递 * 掌握activity的生命周期 * 掌握横竖屏切换的生命周期 * 掌握不同android版本 生命周期的细微差别 * 掌握开启activity获取返回值 * 掌握请求码 结果码的作用 * 掌握程序入口activity配置参数 * 掌握显示意图 

iOS 基础 第五天(0809)

0809 - 内存管理,只对oc对象生效. alloc.retain.release.retainCount 局部变量是放在栈里面的,oc对象是放在堆里面的.栈里面的内容系统自动回收,而堆里面的内容还在,所以不适用ARC的时候要手动回收这些对象内容 如下图所示: 对象的基本结构 每一个对象内部都有一个引用计数器,占用4个字节,是一个整数,当这个引用计数器的值为0的时候,这个对象就会被系统回收销毁.当一个对象刚刚诞生的时候,这个计数器的值为1 如下图所示: 引用计数器的作用 如下图所示: 引用计数

Bootstrap&lt;基础十五&gt; 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &

平面设计 计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

【C++自我精讲】基础系列五 隐式转换和显示转换

0 前言 1)C++的类型转换分为两种,一种为隐式转换,另一种为显式转换. 2)C++中应该尽量不要使用转换,尽量使用显式转换来代替隐式转换. 1 隐式转换 定义:隐式转换是系统跟据程序的需要而自动转换的. 1)C++类型(char,int,float,long,double等)的隐式转换: 算术表达式隐式转换顺序为: 1.char - int - long - double 2.float - double //1)算术表达式 int m = 10; double n = m;//n = 10

Python基础篇(五)

bool用于判断布尔值的结果是True还是False >>> bool("a") True >>> bool(3) True >>> bool("") False >>> bool(0) False Python中的elif类似于Java中的elseif >>> number = (int)(input("input a number: ")) input

电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

MySQL基础(五)——视图

MySQL基础(五)--视图

Java web基础总结五之—— HttpServletRequest与HttpServletResponse

Java web基础总结五之-- HttpServletRequest与HttpServletResponse 在前面总结过,每当客户端给Web服务器发送一个http请求,web服务器就会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象就代表请求和响应,所以我们可以通过request对象获得请求相关的数据和操作.通过response对象进行对响应相关的数据封装和一些其他的操作. 一.HttpServletRequ