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 class="swiper-slide">第十一页</div>
                <div class="swiper-slide">第十二页</div>
                <div class="swiper-slide">第十三页</div>
            </div>
        </div>

然后进行页面的初始化,为了使效果更加明显,我们将页面加上分组显示和页面间隙,在测试的过程当中我们也可以将分组显示删除或者注释,来观看页面效果。

<script>
            var swipre = new Swiper(‘.swiper-container‘,{
                slidesPerView:4,   //分组显示
                spaceBetween:30    //页面间隙
                centeredSlides:true  //页面居中
            });
        </script>

这样就将页面居中的属性添加到了我们的项目当中

点击进入swiper教程:http://h5edu.cn/index.php?c=index&a=step&lessonid=893

  

时间: 2024-10-27 10:47:51

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

swiper的基础使用(九)

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

HTML/CSS基础教程 六

表单 包含表单元素的区域, 表单元素是允许用户在表单中(文本框, 下拉列表, 单选框, 复选框等)输入信息的元素, 使用<form>标签定义. 文本域与密码域 <form> Username: <input type="text" name="firstname"> <br /> Password: <input type="password" name="lastname"

Java web基础总结六之—— Cookie与Session

Java web基础总结六之-- Cookie与Session 当我们在使用浏览器与服务器进行会话的过程中,就必然会产生一些数据.这个时候就需要对数据进行保存.比如常见的购物网站购物车信息的保存.保存客户端与服务器会话数据的两种技术是Cookie与Session. 一.Cookie 1.什么是Cookie? Cookie是保存在客户端的,以name,value的形式保存.当用户使用浏览器访问服务器产生数据时,服务器程序把每个用户的数据以cookie的形式写给用户各自的浏览器.当用户使用浏览器再去

【C++自我精讲】基础系列六 PIMPL模式

0 前言 很实用的一种基础模式. 1 PIMPL解释 PIMPL(Private Implementation 或 Pointer to Implementation)是通过一个私有的成员指针,将指针所指向的类的内部实现数据进行隐藏. 2 PIMPL优点 举例: //x.h class X { public: void Fun(); private: int i; //add int i; }; //c.h #include <x.h> class C { public: void Fun()

java基础(六)

JAVA基础(六) 数组 数组是一组相关变量的集合. 数组是一组相关数据的集合,一组数据实际上就是一连串的的变量,数组按照使用可以分为一维数组.二维数组.多维数组. 数组能够进行一组数据的管理. 一维数组的定义:     类型 数组名[] = new 数组名[数组长度]; 一维数组的读取:    数组名[下标] = input.next(); 一个数组的最大索引号(下标)是它的元素个数(数组的长度)-1 获得数组长度:数组名.length 数组中每一个元素类型都是一样的 若要取出或写入数组中指定

NHibernate 组件基础 (第六篇)

NHibernate 组件基础 (第六篇) 一.组件简介 组件(Component)可以理解为被一个对象所包含的对象而持久化,而并非一个实体.简单说来,假如数据库有FirstName,LastName这两个字段,我们在C#中可以将这两个字段提取出来作为一个Name对象使用. 示例,首先建一张表,并添加数据如下: Person.hbm.xml <?xml version="1.0" encoding="utf-8" ?> <hibernate-map

Bootstrap&lt;基础十六&gt; 导航元素

Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切换. 表格导航或标签 创建一个标签式的导航菜单: 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实

Android 面试题总结之Android 基础(六)

Android 面试题总结之Android 基础(六) 在上一章节Android 面试题总结之Android 基础ListView(五) 主要是ListView的优化,原理以及一些基本问题. 在阅读过程中有任何问题,请及时联系.如需转载请注明 fuchenxuan de Blog 本章系<Android 之美 从0到1 – 高手之路>Android基础将会总结了Android 布局常见面试问题.其实对于基础方面Android 开发来说,经常面试无非就是UI,网络,数据库,这三大方面,本章节总结

Python基础篇(六)

retun空值,后面的语句将不再被执行 >>> def test(): ...    print("just a test!") ...    return ...    print("will not be print") ... >>> test() just a test! 和Java类似,在传递参数时,当参数是字符串,元组时,传递的其实是拷贝,修改实际参数不会影响到形式参数.当参数是对象时,修改实际参数将会影响到形式参数.

redis使用基础(六) ——Redis集群

redis使用基础(六) --Redis集群 (转载请附上本文链接--linhxx) 一.单台服务器 单台redis服务器,会出现单点故障,且需要承受所有的负载.另外,所有的内容都存在单个服务器上,该服务器会成为瓶颈. 使用多台服务器作为redis服务器,需要考虑集群管理,如数据一致性.增加节点.故障恢复等问题.redis对处理这些问题有一套方案. 二.复制 redis的持久化功能保证了数据的持久性,但是如果服务器故障,数据还是可能会丢失,因此需要将数据备份到其他服务器.当一台服务器内容更新,会