文档章节

swiper的基础使用(四)

zhanyingwang
 zhanyingwang
发布于 2016/06/21 09:48
字数 278
阅读 16
收藏 0

这里是HTML5培训 swiper系列教程004:swiper教程
首先我们要搭建一个基础的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/htm/step/h5edu_893.html

© 著作权归作者所有

共有 人打赏支持
zhanyingwang
粉丝 4
博文 66
码字总数 28707
作品 0
东城
私信 提问
8.轮播图组件及vue-awesome-swiper的引入(手把手教你用vue+node+mongodb搭建一个小商城)

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

Ewall_
05/30
0
0
移动端触摸滑动插件Swiper使用指南

Swiper是一款开源、免费、功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4。Swiper主要面向的是手机、平板电脑等移动设备,帮助开发者轻松实现触屏焦点图、触屏Tab切换、触屏...

zhangyin88
07/16
0
0
Swiper插件分页器使用

引入swiper.min.css 引入query.min.js 和swiper.min.js 分页器以及轮播的一般样式引用

大眼睛猫
2017/11/15
0
0
关于VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

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

littleyu
01/11
0
0
AngularJS 中使用Swiper制作滚动图不能滑动

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

冷冷gg
2016/11/15
405
0

没有更多内容

加载失败,请刷新页面

加载更多

spring学习笔记(二)spring 事件的使用

spring 中的事件 spring事件通过订阅发布 可以解耦操作 可以同步 可以异步 步骤 编写事件 通过继承org.springframework.context.ApplicationEvent 来编写事件 public ApplicationEvent(Obj...

NotFound403
昨天
7
0
特斯拉车主成功破解了自己Model 3汽车

据汽车博客Electrek消息,一位特斯拉车主成功破解了自己Model 3汽车,还在此基础上运行了Ubuntu。 这位叫trsohmers的网友表示,“功劳大多要归到Ingineerix的头上,他花了数月才找到初始的那...

linuxCool
昨天
2
0
Gitbook : random errors when using gitbook plugin on running "gitbook serve"

在执行gitbook serve时,会有不定的失败错误 参考问题 :#1309 解决方案: 更新gitbook版本,这个问题似乎是3版本的问题 , 官方也不打算在这个版本解决了。 更新 到最新版本后, 不再出现问...

ol_O_O_lo
昨天
1
0
提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字

提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字: 作者:王健茜;断断续续一个多月才读完了《中国文化的深层结构》,这并不是一本难懂的书,之所以读得慢,源于对书中观点的思...

原创小博客
昨天
3
0
高德地图-行政区域接口

1、获取全国各省信息 https://restapi.amap.com/v3/config/district?extensions=all&key=应用Key&s=rsv3&output=json 2、获取下级行政区域信息 https://restapi.amap.com/v3/config/distric......

voole
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部