优雅的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,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎 ...
随机推荐
- C++入门经典-例2.9-输出十六进制数以及大写的十六进制数
1:代码如下: #include "stdafx.h" #include <iostream> #include <iomanip> using names ...
- 代理模式与AOP
代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在关联 ...
- LVS负载均衡DR工作流程
LVS负载均衡DR工作流程 (a) 当用户请求到达Director Server,此时请求的数据报文会先到内核空间的PREROUTING链. 此时报文的源IP为CIP,目标IP为VIP (b) PRE ...
- 新建一个浏览器APP
安卓开发环境准备好了,试试新建一个浏览器程序吧 1.Start a new Android Studio Project 2.选这个像微信一样的样式 3.选择语言和版本 4.等待创建完成,拖一个Web ...
- 前端必须掌握的 nginx 技能(3)
概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...
- 慕课网_Java Socket应用---通信是这样练成的
第1章 网络基础知识 1-1 网络基础简介 (10:21) 第2章 Java 中网络相关 API 的应用 2-1 Java 中的 InetAddress 的应用 (08:10) import java ...
- MySQL 5.7.27 MGR 单主/多主+ ProxySQL
1 MySQL 5.7.27 MGR 多主环境 基础信息如下: centos 6.5/vbox 实例名 A B C IP 10.15.7.29 10.15.7.28 10.15.7.27 实例端口号 ...
- kafka代码测试连接
1.发送: package kafka.test; import java.util.Date;import java.util.Properties;import java.util.Random; ...
- 布局复习---BFC
其实在一开始我是没有BFC的这个概念的,只是知道在浮动过后,后续的元素如果出现问题,就做我们常说的:overflow:hidden.其中的原因还是不甚了解.不是说以前老师没有讲解过,而是以前根本就没有 ...
- python学习之数据类型（tuple）
3.6 元组 v = (11,22,33,'asd','汉字') 元组就是不可变的列表,又叫制度列表,属性特征与字符串相似,里边可以存放任何类型的元素. 1.元组的元素 这里元组的不可变的意思是⼦元素 ...