优雅的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,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎 ...
随机推荐
- IDEA基础配置
详细IDEA使用请参考 https://www.w3cschool.cn/intellij_idea_doc/ 下面的内容都是从别人手中收集之后整理的: 全局设置 修改主题 修改字体 修改控制台字体 ...
- C++入门经典-例5.9-使用空类型指针执行函数
1:运行代码: // 5.9.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- What is the !! (not not) operator in JavaScript?
What is the !! (not not) operator in JavaScript? 解答1 Coerces强制 oObject to boolean. If it was falsey ...
- 读取PC版微信数据库(电脑版微信数据库)内容
原始网址 https://www.cnblogs.com/Charltsing/p/WeChatPCdb.html 1.PC版微信的密钥是32位byte,不同于安卓版(7位字符串) 2.通过OD或 ...
- 谈谈 UI 中， Padding 和 Margin 有什么区别？
android:padding 和 android:layout_margin 的区别,其实概念很简单,padding 是站在父 view 的角度描述问题,它规定它里面的内容必须与这个父 view 边 ...
- 第九章 SpringCloud之Zuul路由
############Zuul简单使用################ 1.pom.xml <?xml version="1.0" encoding="UTF-8 ...
- 安装kafka 记录
sudo ./zoo /zoo /bin/zkServer.sh start sudo ./kafkacluster/kafka1/bin/kafka-server-start.sh ./kafkac ...
- centos7使用kubeadm安装kubernetes集群
参考资料:官方文档 一.虚拟机安装 配置说明: windows下使用vbox,centos17.6 min版,kubernetes的版本是1.14.1, 安装如下三台机器: 192.168.56.15 ...
- 借助marquee实现弹幕效果
HTML标签marquee实现滚动效果 .基于此,实现简易版 弹幕: HTML <div class="right_liuyan"> <marquee id=& ...
- LeetCode.1002-寻找共有字符(Find Common Characters)
这是悦乐书的第375次更新,第402篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第236题(顺位题号是1002).给定仅由小写字母组成的字符串A,返回列表中所有字符串都 ...