文档章节

swiper的基础使用(五)

zhanyingwang
 zhanyingwang
发布于 2016/06/22 09:52
字数 349
阅读 23
收藏 0

本文为H5EDU机构官方HTML5培训教程HTML5培训,swiper教程。本文主要介绍swiper框架的基本使用方法。

本节讲解如何让swiper页面分组显示。
有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在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>

然后在js当中进行页面的初始化并且添加属性,为了观看效果更佳。
我们在页面当中添加了slide的间隙。

<script>
            var swiper = new Swiper('.swiper-container',{
                slidesPerView:3,   //页面分组显示,这里显示为3组
                spaceBetween:30   //slide间隙
            });
        </script>

当然不要忘记引用我们的框架文件,这样运行我们的页面就会发现我们的页面在当前屏幕当中会显示一组。

 

点击进入swiper教程:http://11731999.blog.51cto.com/11721999/1791249

 

© 著作权归作者所有

共有 人打赏支持
zhanyingwang
粉丝 4
博文 66
码字总数 28707
作品 0
东城
私信 提问
微信小程序(五):轮播

本文讲轮播的实现,部分内容来源于官方文档,增加了笔者实际操作中的一些问题与经验。 本文基于微信小程序公测版,IDE:微信开发者工具 0.10.102800 组件 swiper 微信小程序原生就提供了轮播...

u010635353
2016/11/14
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

没有更多内容

加载失败,请刷新页面

加载更多

开源 serverless 产品原理剖析(二) - Fission

背景 本文是开源 serverless 产品原理剖析系列文章的第二篇,关于 serverless 背景知识的介绍可参考文章开源 serverless 产品原理剖析(一) - Kubeless,这里不再赘述。 Fission 简介 Fiss...

阿里云官方博客
11分钟前
0
0
Android面试整理(附答案)

面试,无非都是问上面这些问题(挺多的 - -!),聘请中高级的安卓开发会往深的去问,并且会问一延伸二。以下我先提出几点重点,是面试官基本必问的问题,请一定要去了解! 基础知识 – 四大组...

终端研发部
15分钟前
1
0
Vue 改变数组触发视图更新

Vue 改变数组触发视图更新 以下方法调用会改变原始数组 push(), pop(), shift(), unshift(), splice(), sort(), reverse()push()push() 方法可向数组的末尾添加一个或多个元素,并返回新的...

不负好时光
21分钟前
1
0
计算机系统要素 C5

本章值得一提的是组织计算机的结构。Hack 的指令和数据是分开存储的,因此它的 CPU 有两个 input: IN inM[16], // M value input (M = contents of RAM[A]) instruction[16],...

lionets
37分钟前
3
0
SpringSecurity404需要注意的地方

在使用@RequestMapping的时候路径的值如果写为("auth"),虽然用的时候前面加不加"/"没有区别,但是在配置了SpringSecurity的http.authorizeRequests().antMatchers()时就必须要注意了! 🌰1...

百萬馬力
40分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部