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(移动端触摸滑动插件)的更多相关文章

  1. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  2. 移动端触摸滑动插件Swiper使用指南

    Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...

  3. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

  4. swiper.js 移动端触摸滑动插件

    API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...

  5. Swiper --移动端触摸滑动插件

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  6. 仿移动端触摸滑动插件swiper,的简单实现

    ​ /** * @author lyj * @Date 2016-02-04 * @Method 滑动方法 针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDo ...

  7. JS封装移动端触摸滑动插件应用于导航banner【精装版】

    自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper(  {parent, child, type, parentN, c ...

  8. 最好的移动触摸滑动插件：Swiper

    最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...

  9. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

随机推荐

  1. 通过Tag标签回退版本修复bug

    tag是对历史一个提交id的引用,如果理解这句话就明白了使用git checkout tag即可切换到指定tag,例如:git checkout v0.1.0 切换到tag历史记录会处在分离头指针状态 ...

  2. IDC机房机器日志采集配置

    以机器 gpu-server-011  为例: 机房机器添加AliUids操作 [root@gpu-server-011 ~]# mkdir -p /etc/ilogtail/users/ [root ...

  3. [古怪问题] Marshal.GetActiveObject 在管理员模式下无法正常运行

    问题: var obj = Marshal.GetActiveObject("PowerPoint.Application") 该代码在管理员模式下运行无法正常获取正在运行的 PP ...

  4. 如何在IIS上发布网站 在阿里云服务器windows server2012r iis上部署.net网站

    如何在IIS上发布网站   本片博客记录一下怎么用IIS发布一个网站,以我自己电脑上一个已经开发完成的网站为例: 1.打开项目 这是我电脑上的一个项目,现在我记录一下将这个项目发布到iis上的整个过程 ...

  5. VS2017打开VS2010项目报 “找不到*.xaml”错误

    VS2017打开VS2010项目报 “找不到*.xaml”错误.详细如下: 未处理System.IO.IOExceptionMessage: “System.IO.IOException”类型的未经处 ...

  6. 深入理解linux系统下proc文件系统内容

    深入理解linux系统下proc文件系统内容 内容摘要:Linux系统上的/proc目录是一种文件系统,即proc文件系统. Linux系统上的/proc目录是一种文件系统,即proc文件系统.与其它 ...

  7. linux内核剖析（十）进程间通信之-信号量semaphore

    信号量 什么是信号量 信号量的使用主要是用来保护共享资源,使得资源在一个时刻只有一个进程(线程)所拥有. 信号量的值为正的时候,说明它空闲.所测试的线程可以锁定而使用它.若为0,说明它被占用,测试的线 ...

  8. window.print控制打印样式

    我们可能会去使用window.print()方法来打印页面,但是当我们遇到需要改变打印时候的字体大小等css样式的时候你可能会懵逼. 所以搜索成了我们的必经之路,我相信在网上搜索出来的最好的答案就是使 ...

  9. 前端项目添加自定义icont图标步骤

    文章转自https://blog.csdn.net/weixin_36185028/article/details/53416185 这里就用到了两个文件,一个是icontfont.css,另外一个是 ...

  10. Atitit 支出分类表 会计科目(1)资产(2)负债(3)资本(4)收益(5)费用(成本) 资产分类表 attilax总结

    Atitit 支出分类表  会计科目(1)资产(2)负债(3)资本(4)收益(5)费用(成本)  资产分类表 attilax总结 会计科目对一般不懂会计的管理人员,常会有莫测高深的感觉,因此不仅不愿去 ...