文档章节

swiper的基础使用(十)

zhanyingwang
 zhanyingwang
发布于 2016/06/29 09:57
字数 464
阅读 11
收藏 0

本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的多行显示。
 
这节课我们介绍swiper当中的swiper嵌套。
 
这次第一步有些不一样,虽然同样是要搭建swiper页面,但是我们在一个swiper页面当中的slide里面嵌套了一个swiper在里面。

<div class="swiper-container swiper-container-h">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Horizontal Slide 1</div>
            <div class="swiper-slide">
                <div class="swiper-container swiper-container-v">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Vertical Slide 1</div>
                        <div class="swiper-slide">Vertical Slide 2</div>
                        <div class="swiper-slide">Vertical Slide 3</div>
                        <div class="swiper-slide">Vertical Slide 4</div>
                        <div class="swiper-slide">Vertical Slide 5</div>
                    </div>
                    <div class="swiper-pagination swiper-pagination-v"></div>
                </div>
            </div>
            <div class="swiper-slide">Horizontal Slide 3</div>
            <div class="swiper-slide">Horizontal Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-h"></div>
    </div>

我们可以看到,这次在swiper的外部容器当中添加了一个类名,swiper-container-h,这个类名其实我们可以随便取一个,作为一个标记,记录我们这个外部容器为哪一个swiper页面的外部容器,我们在初始化的时候是要绑定它的,然后有几个swiper的页面我们就要初始化几次,并且每一个初始化都要绑定到不同的swiper页面的外部容器上面,不然的话我们的页面样式就会错乱,下面进行初始化。

var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        spaceBetween: 50
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50
    });

这里因为有俩个swiper页面所以分别初始化了俩次,然后要分别设定每个swiper页面的CSS样式,以及每一个swiper页面当中的属性。注意,绑定的外部容器类名一定部能相同,不然一个页面初始化俩次会造成样式错乱

点击进入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
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

没有更多内容

加载失败,请刷新页面

加载更多

关于Excel表格导出方法--application/vnd.ms-excel

关于Excel表格导出方法--application/vnd.ms-excel 由于本人所做的项目中需要用到两种将JSP页面table导出到Excel表格的方法(老板也是坑爹),一种是在后台操作数据库来实现,比较简单。由于...

DemonsI
26分钟前
2
0
springboot配置读写分离

我不提供内容,我只是好文章的搬运工 https://www.cnblogs.com/wuyoucao/p/9610882.html

颖辉小居
30分钟前
2
0
Spring 传参

spring传参之@RequestParam注解 @RequestParam注解有三个参数分别是: value、 required、 defaultValue 代码: @RequestMapping(value="test1", method = RequestMethod.GET) public String......

休辞醉倒
31分钟前
2
0
go http 框架性能大幅下降原因分析

最近在开发一个web 框架,然后业务方使用过程中,跟我们说,压测qps 上不去,我就很纳闷,httprouter + net/http.httpserver , 性能不可能这么差啊,网上的压测结果都是10w qps 以上,几个m...

鼎铭
32分钟前
11
0
GCC编译过程记

GCC编译过程记 一、引言 对于编程工作者来说,GCC是一个熟悉的名字,它的全称是“GNU Compiler Collection”。GCC是一组编译器集合,目前其支持C、C++、Objective-C、Objective-C++、Go和RBI...

珲少
33分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部