swiper嵌套小demo(移动端触摸滑动插件)
swiper(移动端触摸滑动插件)
tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦。
swiper的js包css包下链接地址 : https://github.com/Clearlovesky/swiper3.4.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/swiper.min.css">
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
/*display: flex;*/
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
/*-webkit-align-items: center;
align-items: center;*/
}
.swiper-pagination{
top: 0;
height: 3rem;
width: 100%;
background-color: #386bdb;
text-align: left;
}
.swiper-pagination-bullet{
width: 12%;
height: 3rem;
text-align: center;
border-radius: 0;
font-size: 1rem;
line-height: 3rem;
color: #fff;
opacity: 0.6;
background-color: transparent;
}
.swiper-pagination-bullet-active{
opacity: 1;
}
.swiper-pagination-bullet:nth-child(1):before{/*在元素的内容之前插入新内容;*/
content:"热门";/*所插入的内容*/
}
.swiper-pagination-bullet:nth-child(2):before{
content:"关注";
}
.swiper-pagination-bullet:nth-child(3):before{
content:"话题";
}
.swiper-pagination-bullet:nth-child(4):before{
content:"问答";
}
/*第一个swiper里的小swiper*/
.swiper-container-h {
width: 100%;
height: 19.0rem;
margin-top:3.5rem;
background-color: pink;
overflow: hidden;
}
.swiper-container-h>.swiper-wrapper{
margin: 30px 15px;
height: 15.0rem;
}
.swiper-container-h>.swiper-wrapper>.swiper-slide{
background-color: #ccc;
height: 15rem;
line-height: 15rem;
} /*第二屏*/
.one{
height: 100%;
width: 100%;
/*background-color: #ccc;*/
margin-top: 3.5rem;
line-height: 10rem;
}
.one1,.one2,.one3{
height: 10rem;
width: 100%;
background-color: pink;
margin-top: .1em;
line-height: 10rem;
}
/*第三屏*/
.two{
height: 100%;
width: 100%;
background-color: pink;
margin-top: 3.5rem;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 热门 第一屏start -->
<div class="swiper-slide">
<div class="swiper-container-h"> <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>
</div>
</div>
<!-- 热门 第一屏end -->
<div class="swiper-slide">
<div class="one">
<div class="one1">1111</div>
<div class="one2">2222</div>
<div class="one3">3333</div>
</div>
</div>
<div class="swiper-slide">
<div class="two">4444</div>
</div>
<div class="swiper-slide">问答</div>
</div>
<!-- tab栏的头部导航按钮 -->
<div class="swiper-pagination">
<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
</div>
<script src="js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
// spaceBetween: 50
});
var swiperH = new Swiper('.swiper-container-h', {
// pagination: '.swiper-pagination',
slidesPerView: 1.6,//屏幕显示小div的个数
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
</script>
</body>
</html>
swiper嵌套小demo(移动端触摸滑动插件)的更多相关文章
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
- 移动端触摸滑动插件Swiper使用指南
Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...
- Swipe-移动端触摸滑动插件swipe.js
原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...
- swiper.js 移动端触摸滑动插件
API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...
- Swiper --移动端触摸滑动插件
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...
- 仿移动端触摸滑动插件swiper,的简单实现
/** * @author lyj * @Date 2016-02-04 * @Method 滑动方法 针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDo ...
- JS封装移动端触摸滑动插件应用于导航banner【精装版】
自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper( {parent, child, type, parentN, c ...
- 最好的移动触摸滑动插件:Swiper
最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...
- 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
随机推荐
- 使用elasticsearch分页时报max_result_window is too large的错误解决方案
使用elasticsearch进行深度分页查询时的size-from大于10000的时候,会提示一个max_result_window is too large的错误. 官方推荐是scroll查询返回 ...
- rpm 打包的时候 不进行strip
http://blog.aka-cool.net/blog/2016/06/01/how-to-disable-strip-in-rpm-build/ https://www.ichenfu.com/ ...
- 一个简单的开源PHP爬虫框架『Phpfetcher』
这篇文章首发在吹水小镇:http://blog.reetsee.com/archives/366 要在手机或者电脑看到更好的图片或代码欢迎到博文原地址.也欢迎到博文原地址批评指正. 转载请注明: 吹水 ...
- REST API 调用 方法
METHOD DESCRIPTION GET Retrieves the specified resource POST Creates a resource ...
- [C#] 解决Silverlight反射安全关键(SecuritySafeCritical)时报“System.MethodAccessException: 安全透明方法 XXX 无法使用反射访问”的问题
作者: zyl910 一.缘由 在Silverlight中使用反射动态访问时,经常遇到"System.MethodAccessException: 安全透明方法 XXX 无法使用反射访问-- ...
- 雅克比迭代算法(Jacobi Iterative Methods) -- [ mpi , c++]
雅克比迭代,一般用来对线性方程组,进行求解.形如: \(a_{11}*x_{1} + a_{12}*x_{2} + a_{13}*x_{3} = b_{1}\) \(a_{21}*x_{1} + a_ ...
- 如何给TableView、CollectionView添加动效
// // ViewController.m // tableViewAnimation // // Created by 冯敏 on 2018/3/13. // Copyright © 2018年 ...
- iOS--App功耗优化
良好的用户体验需要如下要素: 电池寿命长.随着能效降低,电池寿命也会降低.但用户想让自己的移动设备全天候待命. 速度快.iOS系统处理复杂操作时仍能提供很好的性能. 响应快.同一时刻消耗太多资源会使U ...
- Java基础(二)面向对象(上)
面向对象基础知识 面向对象是相对面向过程而言的 面向对象和面向过程都是一种思想 面向过程强调的是功能行为 面向对象将功能封装进对象,强调具备了功能的对象 面向对象是基于面向过程的 面向对象的特征: 封 ...
- [ci]容器ci索引
伙计们: 有任何意见或建议或看不懂的请在对应的文章下留言(请注明上下文) 我会及时改动. 这是以前的一些在物理机上搞过 [ci]容器ci索引 http://www.cnblogs.com/iiiihe ...