文档章节

swiper的基础使用(九)

zhanyingwang
 zhanyingwang
发布于 2016/06/28 10:47
字数 399
阅读 10
收藏 0

本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的多行显示。
 
第一步,我们还是要创建一个swiper的基础页面。不过这次我们要多创建一些slide。

<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 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 class="swiper-slide">第九页</div>
            </div>
            <div class='swiper-pagination'></div>
        </div>

之后我们到js当中初始化我们的swiper

<script>
            var swiper = new Swiper('.swiper-container',{
               pagination:'.swiper-pagination',
               paginationClickable:true,
               spaceBetween:10,
               slidesPerView:3,
               slidesPerColumn:3   //将swiper页面多行显示为:3行
            });
        </script>

那么可以看出我们这次没有太大的变化,实现样式依然是在初始化当中添加一条属性---------slidePerColumn
一般这个属性都是和分组显示做组合使用的。页面之间也最好加上间隙

点击进入swiper强化教程:http://www.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
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
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

没有更多内容

加载失败,请刷新页面

加载更多

ConcurrentHashMap源码解析

初始化 先看看ConcurrentHashMap中几个重要的属性: // 初始化容量大小static final int DEFAULT_INITIAL_CAPACITY = 16;//默认负载因子static final float DEFAULT_LOAD_FACTOR = 0.75f...

grace_233
7分钟前
0
0
java对象的浅拷贝和深拷贝

浅拷贝 java的数据类型有基本数据类型(如:int、long等)和引用数据类型。例如:对象1中有属性a(基本数据类型)和属性b(引用数据类型),在进行浅拷贝到对象2时,属性a复制属性的值给对象...

yangyangyyyy
8分钟前
0
0
SQLServer AlwaysOn在阿里云的前世今生

缘起 早在2015年的时候,随着阿里云业务突飞猛进的发展,SQLServer业务也积累了大批忠实客户,其中一些体量较大的客户在类似大促的业务高峰时RDS的单机规格(规格是按照 内存CPUIOPS 一定比例...

阿里云云栖社区
9分钟前
0
0
ubuntu16.04 LNMP搭建 php7.1

sudo apt-get update sudo apt-get install mysql-server mysql-client sudo apt-add-repository ppa:ondrej/php sudo apt-get update sudo apt-get install php7.1 php7.1-fpm php7.1-cgi p......

一千零一夜个为什么
15分钟前
0
0
阿里云高级技术专家带你全面了解云主机性能评测

钱超,花名西邪,阿里云高级技术专家,超12年老阿里,是云主机性能领域的知名专家。 在目前的云计算测评领域,很多性能测评存在营销的包装,容易引起误导:比如用瞬时性能引导读者得出结论,...

阿里云官方博客
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部