swiper的基础使用(四)

当然事先不要忘记引用下载好的框架文件。
这一章我们添加了设置容器的宽、高

<!doctype html>
<html>
    <head>
        <title>在slide之间加上间隙</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="swiper.min.css">
        <style>
            body{
                margin:0;
                padding:0;
            }
            .swiper-container{
                width:500px;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                text-align:center;
                font-size:18px;
                display:flex;
                justify-content:center;
                align-items:center;
                background:#F2F2F2;
            }
        </style>
    </head>

之后还是按照第一节课的内容实现一个基本的swiper页面的布置

<body>
        <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>
            <div class="swiper-pagination"></div>
        </div>

然后在js的初始化代码当中加入间隙的属性就可以了

<script src="swiper.min.js"></script>
        <script>
            var swiper = new Swiper(‘.swiper-container‘,{
                pagination:‘.swiper-pagination‘,
                paginationClickable:true,
                spaceBetween:30  //添加每个slide的间隙
            });
        </script>
    </body>
</html>

这样就可以使在每个slide页面中间加入间隙。

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

时间: 2024-10-10 18:29:06

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

swiper的基础使用(九)

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

数字视频基础(四)

3. 常用视频处理算法 3.1 图像的缩放 所谓图像缩放就是创立新的像素位置并对这些新位置赋灰度值.比如,有一副大小为500x500像素的图像,想把它放大1.5倍,也即750x750像素,概念上看,一种最容易的形象化放大方法就是在原始图像上,放一个虚构的750x750的栅格.很显然栅格的间隔小于1个像素,因为,我们在一个较小的图像上去拟合它.为了对覆盖层上的任何电进行灰度赋值,我们在原图像上寻找最靠近的像素并把它的灰度付给栅格上的新像素.当对覆盖栅格的全部点都赋完值之后,就得到放大的图像.这种灰

面向对象基础(四)

1. 函数的重载 2. 构造函数的作用 1. 函数的重载 Chongzai.java class Chongzai{     void funA(){         System.out.println("没有参数的funA函数");     }     void funA(int i){        System.out.println("拥有整形参数的funA函数");     } } Test.java public class Test{    publ

linux基础命令作业四

linux基础命令四 作业一: 1)              开启Linux系统前添加一块大小为15G的SCSI硬盘 2)              开启系统,右击桌面,打开终端 3)              为新加的硬盘分区,一个主分区大小为5G,剩余空间给扩展分区, 在扩展分区上划分1个逻辑分区,大小为5G 4)              格式化主分区为ext3系统 5)              将逻辑分区设置为交换分区 6)              启用上一步的交换分区 7)   

Java Script基础(四) BOM模型

Java Script基础(四) BOM模型 一.BOM模型 BOM模型(Browser Object Model),也称为浏览器对象模型,它包含浏览器相关的属性和方法,例如操作,前进后退按钮,控制地址栏,关闭浏览器窗口,打开新窗口等等.它包含的对象主要有一下几种. 1.Window对象 Window对象时指整个窗口对象,可以通过操作Window对象的属性和方法控制窗口,例如打开和关闭一个窗口. Window常用的属性和方法查询: 2.History对象 History指浏览器访问过得历史记录,

Java多线程基础(四)Java传统线程同步通信技术

Java多线程基础(四)Java传统线程同步通信技术 编写代码实现以下功能 子线程循环10次,接着主线程循环100次,接着又回到子线程循环10次,接着再回到主线程又循环100次,如此循环50次. 分析 1)子线程循环10次与主线程循环100次必须是互斥的执行,不能出现交叉,下面代码中通过synchronized关键字实现此要求: 2)子线程与主线程必须交替出现,可以通过线程同步通信技术实现,下面代码中通过bShouldSub变量实现此要求: 其他需要注意的地方 1)其中business变量必须声

C# 基础知识 (四).C#简介及托管代码

        暑假转瞬即逝,从10天的支教生活到1周的江浙沪旅游,在这个漫长的暑假中我经历了很多东西,也学到了很多东西,也认识到了很多不足之处!闲暇之余我准备重新进一步巩固C#相关知识,包括C#入门知识.C#并行开发.ASP网站等.这篇文章我介绍的是书籍--C#入门经典(Beginning C#) 作者Karli Watson.主要包括的是我自己缺乏的一些C#简介知识和托管代码的内容.内容比较简单,参照该书籍较多,相当于自己的在线笔记!                             

第五天:语言基础(四)

Java 中的运算符 一门编程语言,最常坐的工作就是数据运算.在 Java 中,有丰富的运算符来进行数值运算.这些运算符可以分为以下几类: 算数运算符 关系运算符 位运算符 逻辑运算符 赋值运算符 其它运算符 算数运算符 先来说说算数运算符. 操作符 描述 说明 + 加--运算符两侧的值进行相加 注意类型转换 - 减--左操作数减去右操作数 注意类型转换 * 乘--运算符两侧的值进行相乘 注意类型转换 / 除--左操作数除以右操作数 注意左右操作数类型的不同,结果的类型也不同 % 取余--左操作

深入Java基础(四)--哈希表(1)HashMap应用及源码详解

继续深入Java基础系列.今天是研究下哈希表,毕竟我们很多应用层的查找存储框架都是哈希作为它的根数据结构进行封装的嘛. 本系列: (1)深入Java基础(一)--基本数据类型及其包装类 (2)深入Java基础(二)--字符串家族 (3)深入Java基础(三)–集合(1)集合父类以及父接口源码及理解 (4)深入Java基础(三)–集合(2)ArrayList和其继承树源码解析以及其注意事项 文章结构:(1)哈希概述及HashMap应用:(2)HashMap源码分析:(3)再次总结关键点 一.哈希概

Python 基础语法(四)

Python 基础语法(四) --------------------------------------------接 Python 基础语法(三)-------------------------------------------- 十.Python标准库 Python标准库是随Pthon附带安装的,包含了大量极其有用的模块. 1. sys模块 sys模块包含系统对应的功能 sys.argv ---包含命令行参数,第一个参数是py的文件名 sys.platform ---返回平台类型 sy