优雅的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,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎 ...
随机推荐
- webpack3升级webpack4
cnpm i webpck@4 webpack-cli -D cnpm i webpack-cli -D cnpm update npm WARN deprecated extract-text-we ...
- MySql中根据一列状态值查询状态的个数
最近搞报表的项目,要写数据库sql语句,根据状态值查询状态的个数,这个开始难为到我了,不过已经有解决办法了. 在数据库表中有一个字段是状态(zt),这里面有1-7这7个状态,现在查询每个状态的数量,并 ...
- linux 系统的 cache 过大，解决方案
linux buff/cache过大,清理脚本 2018年06月20日 13:44:53 taozhe666 阅读数:6500 三条指令: sync echo 1 > /proc/sys/v ...
- 关于Hibernate中Java实体类加载出现序列化异常
晚上跟着教程敲网上商城项目的时候(ssh框架写的),碰到了一个问题,就是如题所示的序列化异常问题,这个问题纠结了很久,最后发现了一个解决方法,虽然这篇文章可能几乎不会被人访问到,但是还是要写出来! 其 ...
- 2.进行model和log的路径创建
第一步:使用datetime.strftime(datetime.now(), '%Y%m%d-%H%M%S') 用于生成当前时间 第二步: 使用os.path.join() 将文件的路径与subdi ...
- QBXT七月D1
今天是lyd神仙讲课的第一天,可以感觉到的是这位神仙有着不同于他人的气质,比如他的表情包(雾) 好了来讲正经的) 今天讲的比较多的是模拟算法和一些比赛中的好习惯 high-level 这个名词的大体意 ...
- golang channel关闭后，是否可以读取剩余的数据
golang channel关闭后,其中剩余的数据,是可以继续读取的. 请看下面的测试例子. 创建一个带有缓冲的channel,向channel中发送数据,然后关闭channel,最后,从channe ...
- 【flask】使用配置类管理app测试环境-demo版
如果对app.config是什么还心有疑惑,或者对于这种配置方式很陌生,参考:flask项目配置 app.config classConfig.py: class BaseConfig(object) ...
- idea -- spring datasource配置文件不显示datasource.properties文件对应属性的值，错误提示cannot resolve property key
原文:https://yq.aliyun.com/articles/657711 点击 文件 顶部的 蓝色 MVC application context,修改为Local File
- rocketMQ 消息的 tag
tag 的使用场景:不同的消费组,订阅同一 topic 不同的 tag,拉取不同的消息并消费.在 topic 内部对消息进行隔离. producer 发送消息,指定 tag Message msg = ...