文档章节

swiper的基础使用(七)

zhanyingwang
 zhanyingwang
发布于 2016/06/24 10:28
字数 336
阅读 12
收藏 0

本文为H5EDU机构官方的HTML5培训教程 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 class="swiper-pagination"></div>
        </div>


 
之后我们用选择器来将页面的宽度设定为不相同的(便于我们观看自动分组的效果)

body{
                margin:0;
                padding:0;
                background:#F2F2F2;
            }
            .swiper-container{
                width:100%;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                width:60%;
                font-size:18px;
                text-align:center;
                justify-content:center;
                align-items:center;
                display:flex;
                background:#fff;
            }
            .swiper-slide:nth-child(2n){   //设定页面不同的宽度
                width:40%;
            }
            .swiper-slide:nth-child(3n){
                width:20%;
            }

之后再去js代码当中进行初始化并且添加属性

<script>
            var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                slidesPerView:'auto',
                spaceBetween:30,
                centeredSlides:true
            });
        </script>

通过js当中添加的属性我们可以发现,只是将分组属性的值变为了‘auto’,然后开启slide页面居中的属性就可以了,怎么样,是不是非常简单呢?

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

© 著作权归作者所有

共有 人打赏支持
zhanyingwang
粉丝 4
博文 66
码字总数 28707
作品 0
东城
私信 提问
移动端触摸滑动插件Swiper使用指南

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

zhangyin88
07/16
0
0
AngularJS 中使用Swiper制作滚动图不能滑动

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

冷冷gg
2016/11/15
405
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
Angular中使用Swiper

项目使用的Angular版本是V6.0.3 安装Swiper npm install swiper --save 或者 yarn add swiper --save 在angular.json文件添加swiper.js和swiper.css 安装模组定义档 npm install @types/swi......

小略子
07/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nignx的部署安装和反向代理

3、安装Nginx #yum update 更新一些库和必要的支持,完了之后去下载一个nginx的最新版,如今我责编的版本是1.7.7: #wget http://nginx.org/download/nginx-1.13.6.tar.gz 解压缩 #tar -zvxf n...

wangxujun59
24分钟前
2
0
将博客搬至CSDN

搬家

JackChenzp
28分钟前
2
0
lamba表达式

Java 8 lambda表达式示例 我个人对Java 8发布非常激动,尤其是lambda表达式和流API。越来越多的了解它们,我能写出更干净的代码。虽然一开始并不是这样。第一次看到用lambda表达式写出来的J...

os1cheng
30分钟前
2
0
jenkins: Opening Robot Framework log failed

6down vote Answer is explained at Jenkins issue tracking system: https://issues.jenkins-ci.org/browse/JENKINS-32118 For resolve your problem you must : Connect on your jenkins u......

关上越
38分钟前
1
0
CentOS7 ab压力测试安装与解释

原 CentOS7 ab压力测试安装与解释 2017年11月10日 18:43:25 moTzxx 阅读数:4889更多 个人分类: Centos7 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u0...

linjin200
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部