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. 【ASP.NET 问题】ASP.NET 网站404页面返回200，或者302的解决办法

    做网站在优化网站时遇到了跳转404页面却返回 200.302状态的问题,这样的话搜索引擎会认为这个页面是一个正常的页面,但是这个页面实际是个错误页面,虽然对访问的用户而言,HTTP状态码是“404”还 ...

  2. LeetCode: Gray Code [089]

    [题目] The gray code is a binary numeral system where two successive values differ in only one bit. Gi ...

  3. Atitit s2018.6 s6 doc list on com pc.docx Atitit s2018.6 s6 doc list on com pc.docx  Aitit algo fix 算法系列补充.docx Atiitt 兼容性提示的艺术 attilax总结.docx Atitit 应用程序容器化总结 v2 s66.docx Atitit file cms api

    Atitit s2018.6 s6  doc list on com pc.docx Atitit s2018.6 s6  doc list on com pc.docx  Aitit algo fi ...

  4. Android内存泄漏杂谈

    内存泄漏:是指内存得不到GC的及时回收,从而造成内存占用过多.从而导致程序Crash,也就是常说的OOM. 一.static 先来看以下一段代码 public class DBHelper { pri ...

  5. 机器学习&深度学习基础（tensorflow版本实现的算法概述0）

    tensorflow集成和实现了各种机器学习基础的算法,可以直接调用. 代码集:https://github.com/ageron/handson-ml 监督学习 1)决策树(Decision Tre ...

  6. 加载所有jar包下指定文件

    加载所有jar包下指定文件: 如spring中加载 META-INF/spring.handlers 加载 org.springframework.core.io.support.Properties ...

  7. getCanonicalFile与getAbsoluteFile区别

    package test; import java.io.File; import java.io.IOException; public class TestFilePath { public st ...

  8. 【转】WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目 ...

  9. 【转】WPF自定义控件与样式(10)-进度控件ProcessBar自定义样

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: ProcessBar自定义标准样式: ProcessBar自定义环形进 ...

  10. 在生成一个窗体的时候，点击窗体的右上角关闭按钮激发窗体事件的方法：窗体Frame为事件源，WindowsListener接口调用Windowsclosing()。

    事件模式的实现步骤: 开发事件对象(事件发送者)——接口——接口实现类——设置监听对象 一定要理解透彻Gril.java程序.   重点:学会处理对一个事件源有多个事件的监听器(在发送消息时监听器收到 ...