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. poj 1061 青蛙的约会 拓展欧几里得模板

    // poj 1061 青蛙的约会 拓展欧几里得模板 // 注意进行exgcd时,保证a,b是正数,最后的答案如果是负数,要加上一个膜 #include <cstdio> #include ...

  2. ndk学习9: 动态使用共享库

    动态使用共享库函数 dll_main      环境介绍 续上节代码 目录结构:   android.mk如下: LOCAL_PATH := $(call my-dir) include $(CLEA ...

  3. iOS设计模式解析(二)抽象工厂方法

    抽象工厂方法:提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类 与工厂方法区别: 抽象工厂通过对象组合创建抽象产品.工厂通过类集成创建抽象产品 抽象工厂创建多系列产品.工厂创建一种产 ...

  4. js原生设计模式——6复杂对象的构建—Builder建造者模式

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. 201521123108 《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 Q1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 答 ...

  6. 生成ssl秘钥的方法(纯粹本人记录用的,勿踩)

    openssl genrsa -des3 -out server.key 1024 openssl req -new -key server.key -out server.csr cp server ...

  7. Java中的变量数据类型补充

    Java中变量的数据类型的补充 变量按照数据类型进行分类 1.基本数据类型 数值型:①整数类型(byte,short,int,long)②浮点型(float,doubbe)③字符型(char)④布尔型 ...

  8. 国内安装helm

    helm repo remove stable helm repo add stable https://kubernetes.oss-cn-hangzhou.aliyuncs.com/charts ...

  9. Hexo的搭建

    Hexo的安装与初始化 1.确保电脑已经安装Node.js,Git 打开GUI Bash,输入以下代码安装Hexo: npm install -g hexo-cli 2.运行以下命令在目标文件夹初始化 ...

  10. druid部署

    Quickstart单机测试 http://druid.io/docs/0.10.1/tutorials/quickstart.html (1)Getting started 下载安装Druid: c ...