优雅的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,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎 ...
随机推荐
- eclipse中取消自动生成的TODO Auto-generated method stub
我们在实现接口定义的方法.Eclipse往往会自动加上一句:TODO Auto-generated method stub 每次手动删除很麻烦,我们可以设置一下,让强大的Eclipse在完成自动代码时 ...
- Javascript事件：this.value()和this.select()
1.JavaScript的this.value() <asp:TextBox ID="txtComment" runat="server" Text=&q ...
- js创建对象的6种方式总结
1.new 操作符 + Object 创建对象 var person = new Object(); person.name = "lisi"; person.age = 21; ...
- watir安装——windows环境
默认情况下,gem sources 都是https://rubygems.org/
- HTML控件 隐藏
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;" document.getElementById ...
- leetcode-easy-math-412 Fizz Buzz
mycode 99.06% class Solution(object): def fizzBuzz(self, n): """ :type n: int :rtype ...
- Java内存泄漏分析和预防
1. 什么是内存泄漏?有什么危害 书面说法: 内存泄漏:对象已经没有被应用程序使用,但是垃圾回收器没办法移除它们,因为还在被引用着. 在Java中,内存泄漏就是存在一些被分配的对象,这些对象有下面两个 ...
- 汽车Lin总线特点
串行通信:线间干扰小,节省线束,传输距离长 单线传输:增强的ISO 9141 (ISO 15765-1),总线电压基于VBAT 最高速率:20kbit/s 单主多从结构,无需仲裁:主节点同时包含主任务 ...
- hive跑mapreduce报java.lang.RuntimeException: Error in configuring object
写于2016.7月 最近项目需要在hbase上做统计分析,在本机上装了hive,结果跑小批量数据sum时报错: hive> select count(*) from page_view; Tot ...
- GIS开源程序收集
每一个项目包含以下信息: 名称 主题 分类 描述 开始时间 语言 许可 演示网址 项目网址 成熟度 活跃度 评价 分类包括:GIS基础函数库.GIS控件.GIS桌面程序.GIS数据引擎.WEBGI ...