swiper——Basic(parallax,pagination)_swiper-parallax-程序员宅基地
技术标签： swiper pagination parallax
一、个人案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="swiper-4.5.0/swiper4-animate-demo/css/swiper.min.css">
<link rel="stylesheet" href="swiper-4.5.0/swiper4-animate-demo/css/animate.min.css">
</head>
<style>
.body{
position: relative;
height: 100%;
margin: 0;
padding: 0;
}
/*定义最外层的样式*/
.swiper-container{
height: 500px;
background: #000;
}
/*定义背景照片样式*/
.parallax-bg{
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.swiper-slide{
color: #FFFFFF;
font-size: 50px;
}
.swiper-slide .title {
font-size: 41px;
font-weight: 300;
}
.swiper-slide .subtitle {
font-size: 21px;
}
.swiper-slide .text {
font-size: 14px;
max-width: 400px;
line-height: 1.3;
}
</style>
<body>
<div class="swiper-container">
<div class="parallax-bg" style="background: url(img/3.jpg) no-repeat center;" data-swiper-parallax="-13%"> </div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-200">Slide 1</div>
<div class="subtitle" data-swiper-parallax="-300">Subtitle</div>
<div class="text" data-swiper-parallax="-400">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-200">Slide 2</div>
<div class="subtitle" data-swiper-parallax="-300">Subtitle</div>
<div class="text" data-swiper-parallax="-400">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-200">Slide 3</div>
<div class="subtitle" data-swiper-parallax="-300">Subtitle</div>
<div class="text" data-swiper-parallax="-400">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
</div>
</div>
<div class="swiper-button-prev swiper-button-white" ></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next swiper-button-white" ></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-pagination"></div>
</div>
<script src="swiper-4.5.0/swiper4-animate-demo/js/swiper.min.js"></script>
<script src="swiper-4.5.0/swiper4-animate-demo/js/swiper.animate.min.js"></script>
<script>
//用于初始化一个Swiper，返回初始化后的Swiper实例。
/* swiperContainer Swiper容器的css选择器，例如".swiper-container"
*parameters Swiper的个性化配置
* */
var Swiper=new Swiper('.swiper-container',{
effect:"fade",//淡入淡出效果
parallax:"true",//产生视觉差
pagination:{//使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式。
el: '.swiper-pagination',//分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#pagination1，#pagination2。
clickable:true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
type : 'progressbar'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
})
</script>
</body>
</html>
效果图
（1）parallax
设置为true开启视差效果。
效果可以应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值的slide个数-1分之1
1.视差位移变化
在所需要的元素上增加data-swiper-parallax属性（与Swiper切换方向相同）或data-swiper-parallax-x （x方向） data-swiper-parallax-y（y方向）
data-swiper-parallax接受两种类型的参数。
number（单位：px），如-300，从右边300px进入左边出去。
percentage（百分比），移动距离=该元素宽度 * percentage。
2.视差透明度变化
在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1，如0.5，从半透明进入半透明出去
3.视差缩放变化
在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5，从一半大小进入一半大小出去
还可通过data-swiper-parallax-duration设定视差动画持续时间（ms）。默认值是Swiper的speed，与切换时间同步。
*设定透明度或缩放必须同时设定位移，否则无效(4.0.5)
（2）pagination
部分参数
el:分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#pagination1，#pagination2。
type:分页器样式类型，可选
‘bullets’ 圆点（默认）
‘fraction’ 分式
‘progressbar’ 进度条
‘custom’ 自定义
progressbarOpposite:使进度条分页器与Swiper的direction参数相反，也就是说水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
bulletElement：设定分页器指示器（小点）的HTML标签。
dynamicBullets：动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏
dynamicMainBullets：动态分页器的主指示点的数量
hideOnClick：默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
clickable：此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
查看全部参数请到官网
progressbarOpposite效果
dynamicBullets效果
智能推荐
Python篇：三维散点图scatter介绍_ax.scatter3d-程序员宅基地
文章浏览阅读6.8w次，点赞20次，收藏156次。 ##画个简单三维图import matplotlib.pyplot as pltfrom mpl_toolkits.mplot3d import Axes3Dax = plt.figure().add_subplot(111, projection = '3d')#基于ax变量绘制三维图#xs表示x方向的变量#ys表示y方向的变量#zs表示z方向的变量..._ax.scatter3d
查看Linux的java版本报错:/lib/ld-linux.so.2: bad ELF interpreter: 没有那个文件或目录_java -version -bash: /usr/local/java/bin/java: /li-程序员宅基地
文章浏览阅读7.9k次，点赞3次，收藏2次。错误信息原因卸载的时候,yum的remove会把跟这个相依赖软件包都给删除了,再后来配置jdk的时候,只修改环境变量是不行的,因为它所以来的包没了##解决方案执行以下命令yum install glibc.i686再查看一下版本OK了..._java -version -bash: /usr/local/java/bin/java: /lib/ld-linux.so.2: bad elf i
Linux常见命令 21 - 网络命令 ping、ifconfig、last、lastlog、traceroute、netstat_linux网路包走向图命令-程序员宅基地
文章浏览阅读3.7k次，点赞2次，收藏11次。网络常用命令 ping、ifconfig、last、lastlog、traceroute、netstat_linux网路包走向图命令
没有App，也没有 App Store，未来的手机会干掉全部应用开发人员吗？-程序员宅基地
文章浏览阅读46次。未来的 AI 手机应该是什么样儿的？在上个月的 WMC2024 上，德国电信联合高通、Brain.ai 推出了一款突破性创新的概念 AI 手机 T phone。与传统智能手机不同，这款手机主打一个“无 App”，它清除了屏幕上的密密麻麻的 App 图标，只留有一个按钮用来激活手机里的 AI 助手，让用户通过类似 ChatGPT 的操作界面来交互。
【OpenCV 例程 300篇】224. 特征提取之提取骨架_骨架提取-程序员宅基地
文章浏览阅读5.8k次，点赞5次，收藏53次。骨架可以由区域的边界计算。提取骨架的常用方法是用重建开运算来实现。skimage 中提供了函数 **skimage.morphology.skeletonize** 可以获取图像的骨骼。_骨架提取
mysql blob类型导致中文乱码_blob类型中文乱码无效-程序员宅基地
文章浏览阅读3.1k次。做前端富文本时遇到的问题之一，保存后，中文乱码。在前段端一顿操作后，调试中发现是blob类型导致解析乱码看到一篇文章代码都不用写2分钟搞定，下面是原文链接blog链接解决办法如下，建个工具类，mapper配置下完美解决public class ConvertBlobTypeHandler extends BaseTypeHandler<String> { //指定字符..._blob类型中文乱码无效
随便推点
基于角色管理的系统访问控制 _访问控制使用的二元组是什么-程序员宅基地
文章浏览阅读1.4k次。1. 引言（Introduction） 1.1. 关键词定义（Definitions）有关定义说明如下：安全管理：计算机技术安全管理的范围很广，可以包括网络安全性、数据安全性、操作系统安全性以及应用程序安全性等。很多方面的安全性管理大都已经有成熟的产品了，我们只需根据自己需要有选择性的使用就_访问控制使用的二元组是什么
微服务项目框架及多模块开发_微服务电商项目模块划分-程序员宅基地
文章浏览阅读729次。电商模式：市面上有5种常见的电商模式，B2B、B2C、C2B、C2C、O2O；1.B2B模式B2B（Business to Business），是指 商家与商家建立的商业关系。如：阿里巴巴2.B2C模式B2C（Business to Consumer），就是我们经常看到的供应商直接把商品卖给用户，即“商家对客户”模式，也就是通常说的商业零售，直接面向消费者销售产品和服务。如：苏宁易购、京东、天猫、小米商城。3.C2B模式C2B（Customer to Business），即消费者对企业（客户对商家）。_微服务电商项目模块划分
hive的几种存储格式_hive数据库后缀-程序员宅基地
文章浏览阅读308次。Text/CSVcsv文件不支持块压缩，所以在Hadoop中使用压缩的CSV文件经常会带来很低的读性能。无法存储元数据。新的字段只能追加到所有字段的尾部，并且不能产出已经存在的字段。支持有限的模式演进。JSON能够存储元数据。不支持块压缩。第三方的JSON SerDe工具能解决这些问题。全面支持模式演进。AvroAvro是Hadoop平台多功能的数据存储格式。它能够存储元数据，还可以把元数据单独存储到一个文件中。支持模式演进。因为Avro可以通过定义一个新的独立的模式文件来重命名、增加、删除和修改_hive数据库后缀
Drupal theme-1-程序员宅基地
文章浏览阅读875次。修改Drupal生成的HTML或者其他标识字体，你需要深入的了解主题系统的各个组成部分。主题系统是个优雅的架构，它可使你绕过核心代码，但是它有一个很长的学习曲线，特别是在你想使你的站点于其他drupal站点看起来不同时。我们将向你讲述主题系统是如何工作的，以及想你展示隐藏在Drupal核心本后的一些最佳实践。首先要记住的是：不要通过编辑模块文件内部的HTML来改变你站点的外观。如果这样做了，你仅仅
JAVA文件上传多方式_java文件上传读取文件-程序员宅基地
文章浏览阅读2.7k次，点赞5次，收藏3次。JAVA文件上传多种方式_java文件上传读取文件
微平均的服务拓扑管理与可视化-程序员宅基地
文章浏览阅读350次，点赞9次，收藏9次。1.背景介绍微平均(Microservices)是一种软件架构风格，它将应用程序拆分成小的、独立运行的服务。这些服务通过轻量级的通信协议(如HTTP和gRPC)相互协同，以实现整个应用程序的功能。微服务架构的优势在于它的可扩展性、灵活性和容错性。然而，随着微服务数量的增加，服务之间的依赖关系也变得复杂，这导致了服务拓扑管理和可视化的问题。在这篇文章中，我们将讨论如何使用微平均的服务拓扑管理..._微服务 拓扑 可视化