概述

swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用。

通用方案

一般来说,swiper需要放在body的下一层,虽然也可以用一个div包裹它,无论怎样,它的上级和上上级父节点都需要加上如下代码:

//有div.wrap包裹
body, html, .wrap, .swiper-container {
width: 100%;
height: 100%;
} //无div包裹
body, html, .swiper-container {
width: 100%;
height: 100%;
}

屏幕自适应

有2种方案,各有优劣:

  • 屏幕自适应,滑动一下滑块即到了下一张slider,优点是体验很好,缺点是slider中超过屏幕的内容会自动被隐藏且不能被看到。
  • 屏幕不自适应,滑动一下会滑动到当前slider的底部,再滑一下才能滑到下一页。优点是能看到整页内容,缺点是体验不好。

以上两种方案其实就是height是具体数值还是百分比的问题,实现代码如下:

//屏幕自适应
.swiper-slide {
height: 100%; //这里是终点
width: 100%;
position: relative;
overflow: hidden;
} //屏幕不自适应
.swiper-slide {
height: 950px; //具体数值,随意填
width: 100%;
position: relative;
overflow: hidden;
}

所以如果每一个slider的内容很多,就只能用屏幕不自适应的方法,否则建议选用屏幕自适应的方法。

需要注意的是:

  1. 由于height:100%的机制是对比父标签的,所以屏幕自适应方案中可能需要将所有父容器的height都设置为100%,甚至有必要使用!important。
  2. 屏幕自适应方案安排页脚的方法是:把页脚单独放在一个slider里面。

消除滚动条

一般情况下使用swiper浏览器右侧是没有滚动条的,但是一些特殊情况或者兼容其它浏览器时就会突然有滚动条,这个时候可以用如下css代码解决:

overflow-y:hidden;

这行代码有些时候有兼容问题,但是可以通过设置position:relative解决,具体方法自行百度。

兼容问题

如果要兼容IE7的话,请使用swiper2。否则的话,在IE7上面swiper不能切换slider。

全屏使用swiper.js过程中遇到的坑的更多相关文章

  1. Flash设置全屏后,放到网页中显示不正常

    stage.displayState = StageDisplayState.FULL_SCREEN;//全屏,注意当设置全屏后,放到网页中显示不正常

  2. 动态加载JS过程中如何判断JS加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

  3. Android中全屏 取消标题栏,TabHost中设置NoTitleBar的三种方法(转)

    Android中全屏 取消标题栏,TabHost中设置NoTitleBar的三种方法http://www.cnblogs.com/zdz8207/archive/2013/02/27/android- ...

  4. 爬取CVPR 2018过程中遇到的坑

    爬取 CVPR 2018 过程中遇到的坑 使用语言及模块 语言: Python 3.6.6 模块: re requests lxml bs4 过程 一开始都挺顺利的,先获取到所有文章的链接再逐个爬取获 ...

  5. VS2017 + EF + MySQL 我使用过程中遇到的坑

    原文:VS2017 + EF + MySQL 我使用过程中遇到的坑 写在前面: 第一次使用MySQL连接VS的时候本着最新版的应该就是最好的,在MySQL官网下载了最新版的MySQL没有并且安装完成之 ...

  6. MySql数据库GROUP BY使用过程中的那些坑

    MySql数据库GROUP BY使用过程中的那些坑 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. 特别注意: group by 有一个原则,就是 select 后面的所有 ...

  7. 百度自动发贴,登录很顺利的模拟实现,但发贴攻关失败,能力有限,追JS过程中颇为痛苦

    攻关失败,且短期内看不到希望,看不到方向,且越来越焦急,目前已知的是,用根据用户的鼠标事件以一定的规则结合其他数据,服务器以这些数据验证是否为真正的手动发贴. 不过闲暇时实现了百度贴吧的自动签到. 较 ...

  8. 学习Nodejs:《Node.js开发指南》微博项目express2迁移至express4过程中填的坑

    <Node.js开发指南>项目地址https://github.com/BYVoid/microblog好不容易找到的基础版教程,但书中是基于express2的,而现在用的是express ...

  9. 【Angular JS】网站使用社会化评论插件,以及过程中碰到的坑

    目前正在开发自己的网站,技术上使用Angular JS + Express JS + Mongo DB.由于网站会有文章发布,因此需要有评论功能.评论功能也可以自己开发,但由于现在社会化评论插件很多, ...

随机推荐

  1. Cantor表(NOIP1999)

    题目链接:Cantor表 这道题很水,但有的人没看懂题意,这不怪大家,怪题目没说清楚. 给张图: 看到这,你应该明白题目意思了. 先看看有什么规律. 我把这个数列写出来: 1/1,1/2,2/1,3/ ...

  2. 微信小程序设置全局字体

    微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx ...

  3. jitter

    release jitter of tasks there is a distinction between the real activation request and the actual ac ...

  4. 第32章:MongoDB-索引--Capped固定集合

    ①Capped集合(固定集合) Capped集合的大小固定,性能好,如果空间用完了,新的对象会覆盖旧的对象. find时默认就是插入的顺序,Capped集合会自动维护. ②语法 db.createCo ...

  5. 用IrisSkin2.dll美化你的WinForm

    From:http://hi.baidu.com/tr0j4n 在WinForm中,可以方便地给自己的程序添加皮肤,做出各种绚丽的效果,而只需要很简单的几句代码即可搞定,下面来领略下. 前期准备:1. ...

  6. 关于memcached

    代振军 http://www.cnblogs.com/daizhj/archive/2009/03/23/1386652.html http://www.cnblogs.com/daizhj/arch ...

  7. Forward团队-爬虫豆瓣top250项目-团队编程项目开发环境搭建过程

    本次结对编程和团队项目我都需要用python环境,所以环境的搭建是一样的.(本文部分内容引用自己博客:http://www.cnblogs.com/xingyunqi/p/7527411.html) ...

  8. std::set 中内部元素有序条件删除的理解

    std::set 中内部元素有序条件删除的理解 1. std::set中的元素是有序排列的 注意:Set集合中的元素通过iterator的引用,但是不能修改. 元素排序: (1)元素中实现比较oper ...

  9. 卷积神经网络(CNN)之一维卷积、二维卷积、三维卷积详解

    作者:szx_spark 由于计算机视觉的大红大紫,二维卷积的用处范围最广.因此本文首先介绍二维卷积,之后再介绍一维卷积与三维卷积的具体流程,并描述其各自的具体应用. 1. 二维卷积 图中的输入的数据 ...

  10. Python自动化开发 - Django基础

    本节内容 一.什么是web框架 二.MVC和MTV视图 三.Django基本命令 四.路由配置系统 五.编写视图 六.Template 七.ORM 一.什么是web框架 对于所有的web应用,本质上其 ...