优雅的swiper实例
swiper实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.css"> <!-- Demo styles -->
<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%;
}
#nav{
width: 100%;
height: 50px;
position: absolute;
left: 0;
top:0;
z-index: 3;
border-bottom: 1px solid red;
background: #fff;
}
#nav .swiper-slide{
line-height:50px;
text-align: center;
width: auto;
padding: 0 12px;
}
#nav .active{
color: red;
} #page .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;
}
.scoll_content{
height: auto;
}
</style>
</head>
<body>
<div class="swiper-container" id="outside">
<div class="swiper-wrapper">
<div class="swiper-slide">
1
</div>
<div class="swiper-slide">
<!-- Swiper -->
<div id="nav" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div>
<div class="swiper-slide">Slide 13</div>
<div class="swiper-slide">Slide 141423421412341123423142412</div>
</div>
</div>
<div class="swiper-container" id="page">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide scoll_content">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
<li>li14</li>
<li>li15</li>
<li>li16</li>
<li>li17</li>
<li>li18</li>
<li>li19</li>
<li>li20</li>
<li>li21</li>
<li>li22</li>
<li>li23</li>
<li>li24</li>
<li>li25</li>
<li>li26</li>
<li>li27</li>
<li>li28</li>
<li>li29</li>
<li>li30</li>
<li>li31</li>
<li>li32</li>
<li>li33</li>
<li>li34</li>
<li>li35</li>
<li>li36</li>
<li>li37</li>
<li>li38</li>
<li>li39</li>
<li>li40</li>
<li>li41</li>
<li>li42</li>
<li>li43</li>
<li>li44</li>
<li>li45</li>
<li>li46</li>
<li>li47</li>
<li>li48</li>
<li>li49</li>
<li>li50</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide scoll_content">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide scoll_content">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
<li>li14</li>
<li>li15</li>
<li>li16</li>
<li>li17</li>
<li>li18</li>
<li>li19</li>
<li>li20</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide scoll_content">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide scoll_content">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
<li>li14</li>
<li>li15</li>
<li>li16</li>
<li>li17</li>
<li>li18</li>
<li>li19</li>
<li>li20</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide scoll_content">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
<li>li14</li>
<li>li15</li>
<li>li16</li>
<li>li17</li>
<li>li18</li>
<li>li19</li>
<li>li20</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide scoll_content">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
<li>li14</li>
<li>li15</li>
<li>li16</li>
<li>li17</li>
<li>li18</li>
<li>li19</li>
<li>li20</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide scoll_content">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
<li>li14</li>
<li>li15</li>
<li>li16</li>
<li>li17</li>
<li>li18</li>
<li>li19</li>
<li>li20</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide scoll_content">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
<li>li14</li>
<li>li15</li>
<li>li16</li>
<li>li17</li>
<li>li18</li>
<li>li19</li>
<li>li20</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div>
<div class="swiper-slide">Slide 13</div>
<div class="swiper-slide">Slide 14</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div> <!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.js"></script> <script> var outsideSwiper = new Swiper('#outside', {
direction: 'vertical',
height: window.innerHeight,
}) var clientWidth = 0
var navAllWidth = 0 var pageSwiper = new Swiper('#page', {
spaceBetween: 10,
pagination: {
el: '#page .swiper-pagination'
},
on: {
slideChangeTransitionStart() {
var index = this.activeIndex
var slides = navSwiper.slides slides.removeClass('active')
slides.eq(index).addClass('active')
navSwiper.setTransition(300) var slideLeft = slides[index].offsetLeft
var slideWidth = slides[index].offsetWidth // console.log(slideLeft)
// console.log(navAllWidth - clientWidth/2)
// console.log('-----') var centerLeft = (clientWidth-slideWidth)/2
if (slideLeft < centerLeft) {
navSwiper.setTranslate(0)
} else {
if (slideLeft > navAllWidth - (clientWidth+slideWidth)/2) {
navSwiper.setTranslate(clientWidth - navAllWidth)
} else {
navSwiper.setTranslate(centerLeft - slideLeft)
}
}
}
}
}); var navSwiper = new Swiper('#nav', {
slidesPerView: 'auto',
freeMode: true,
freeModeSticky: true,
on: {
init() {
// console.log(this)
this.slides.eq(0).addClass('active')
clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
for (var i=0; i<this.slides.length; i++) {
navAllWidth += parseInt(this.slides[i].offsetWidth)
}
},
tap() {
var index = this.clickedIndex
pageSwiper.slideTo(index, 0)
}
}
}); var navHeight = document.getElementById('nav').offsetHeight var contentSwiper = new Swiper('.scroll', {
direction: 'vertical',
freeMode: true,
slidesPerView: 'auto',
slidesOffsetBefore: navHeight,
mousewheel: {
releaseOnEdges: true,
},
on: {
touchMove() {
if (this.translate>navHeight+20) {
outsideSwiper.slideTo(0)
}
}
}
}) </script>
</body>
</html>
优雅的swiper实例的更多相关文章
- swiper实例应用
1.手机竖屏单页滑 为了防止图压缩,单独切图,背景用纯色 2.自由滑 很长的图,自由切割
- 转载《浅析MVC框架中View层的优雅设计及实例》
在基于B/S的应用程序开发中,从基本的技术分工上来说就是两大块,一是软件显示界面,另一个是程序逻辑.在N年前的脚本语言时代,无论是asp.php还是jsp,我们基本是都是把这两者柔和在一起的.尽管我们 ...
- Swiper说明&&API手册 【中文手册Swiper】
原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...
- Swiper 中文API手册（share）
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...
- Swiper.js 中文API手册
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...
- Swiper说明&&API手册
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...
- Swiper说明及API手册说明
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...
- Swiper之滑块1
之前介绍过Swiper,它是一个神奇的插件.类似于Android的触屏操作,Swiper应用于Web中也可以实现这样的效果,我们来看看(用鼠标可拖动). startSlide Integer (def ...
- Swiper API
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html 最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎 ...
随机推荐
- [CSP-S模拟测试]:统计（树状数组+乱搞）
题目传送门(内部题120) 输入格式 第一行,两个正整数$n,m$. 第二行,$n$个正整数$a_1,a_2,...,a_n$,保证$1\leqslant a_i\leqslant n$,可能存在相同 ...
- sklearn.model_selection Part 1: Splitter Classes
1. GroupKFold(_BaseKFold) 主要参数: n_splits : int, default=3 在GroupKFold.split(X[, y, groups])中会调用下面的方法 ...
- LinkedList类源码浅析(一)
1.先来看一看LinkedList类的字段和构造方法 size记录链表的长度,first永远指向链表的第一个元素,last永远指向链表的最后一个元素 提供两个构造方法,一个无参的构造方法,一个接受一个 ...
- Java连接MQTT服务-ws方式
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- ajaxform和ajaxgird中添加数据
ajaxform添加数据 ajaxform.setRecord(response.getAjaxDataWrap("dataWrapBill").getData()); ajaxg ...
- Iris Classification on Keras
Iris Classification on Keras Installation Python3 版本为 3.6.4 : : Anaconda conda install tensorflow==1 ...
- 使用docker 部署python 项目
使用python 开发了一个restfu api程序,使用docker镜像部署.主要有如下步骤,简单记录以供以后参考. 1. 创建DockerFile文件 创建一个DockerFile文件,文件名为D ...
- Linux监控命令之==>ps
一.命令说明 ps 命令是最基本同时也是非常强大的进程查看命令.使用该命令可以确定有哪些进程正在运行和运行的状态.进程是否结束.进程有没有僵死.哪些进程占用了过多的资源等等.总之大部分信息都是可以通过 ...
- Unity中的动画系统和Timeline(5) Timeline
在前面的动画,都是控制单独的物体,比如说控制一个角色的运动.而Timeline,可以对多个物体实施动画,形成过场动画,或者电影效果.比如,很多赛车游戏比赛开始前都会播放一段开场动画,围绕自己车的几个方 ...
- 描述下数据库中的事务--ACID各个的特点
1. 原子性(Atomicity) 在一个事务内的操作,要么全部成功,要么全部失败. 2. 一致性(Consistency) 数据库从一个一致性状态,转移到另一个一致性状态. 3. 隔离性(Isola ...