Swiper-轮播图。
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,可以用来做轮播和滑动.
初始化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.css"/>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide{
font-size: 50px
}
.swiper-slide:nth-of-type(1){
background-color: cornflowerblue;
}
.swiper-slide:nth-of-type(2){
background-color: coral;
}
.swiper-slide:nth-of-type(3){
background-color: yellowgreen;
}
</style>
</head>
<body>
<div 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>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<!--导航等组件可以放在container之外--> <script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
// loop: true,
//
// // 如果需要分页器
pagination: '.swiper-pagination',
//
// // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
//
// // 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
</script>
</body>
</html>- 基本配置
var mySwiper = new Swiper ('.swiper-container', {
// 滑动方向
// horizontal水平
// vertical垂直
direction: 'horizontal',
// 初始化时候slide的索引(从0开始)
initialSlide: 1,
// 手指松开至slide贴合的时间
speed:3000,
// 设置自动播放的事件间隔
autoplay: 2000,
// 可显示数量
slidesPerView:2,
// 滑块居中
centeredSlides:true,
}) 触摸设置
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 触摸距离与slide滑动距离的比率
touchRatio:0.1, // 无法滑动
onlyExternal:true, // 滑块跟随手指进行移动
followFinger:false, // 定义longSwipesMs
longSwipesMs:1000, longSwipes:false, shortSwipes:false, longSwipesRatio:0.5, touchAngle:10,
})
禁止切换和前进后退 <body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide stop">Slide 1</div>
<!--<div class="swiper-slide swiper-no-swiping">Slide 2</div>-->
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button> <script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
noSwiping:true,
noSwipingClass : "stop",
nextButton : ".next",
prevButton : ".prev",
})
</script>
分页器 <style>
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide{
font-size: 50px
}
.swiper-slide:nth-of-type(1){
background-color: cornflowerblue;
}
.swiper-slide:nth-of-type(2){
background-color: coral;
}
.swiper-slide:nth-of-type(3){
background-color: yellowgreen;
}
.swiper-pagination-bullet{
width: 20px;
height: 20px;
}
.swiper-pagination-bullet-active{
background-color: yellow;
}
</style>
</head>
<body>
<div 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>
<div class="swiper-pagination"></div>
</div> <script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
pagination : ".swiper-pagination",
paginationType : "bullets",
paginationType : "fraction",
paginationType : "progress",
paginationClickable : true,
paginationHide : true,
paginationElement : "i",
paginationBulletRender : function( swiper,index,classname ){
return "<span class='"+ classname +"'>"+ (index+1) +"</span>"
}
})
</script>
</body>
切换效果 <script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', effect : "slide",
effect : "fade",
effect : "cube",
effect : "coverflow",
effect : "flip",
})
</script>
进程 <body>
<div 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>
</div>
<button id="btn">按钮</button> <script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', }) btn.onclick = function(){
alert( mySwiper.progress );
alert( mySwiper.slides[0].progress );
console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
} setInterval(function(){
console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
},20)
</script>
</body>常用属性和回调
<body>
<div 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>
</div>
<button id="btn">按钮</button>
<script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', speed : 2000, onSlideChangeStart : function(){
console.log( "开始滑动" );
},
onSlideChangeEnd : function(){
console.log( "滑动结束" );
}
}) console.log( mySwiper.width );
console.log( mySwiper.height ); btn.onclick = function(){
console.log( mySwiper.translate );
console.log( mySwiper.activeIndex );
console.log( mySwiper.previousIndex );
}
</script>
</body>
Swiper-轮播图。的更多相关文章
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- swiper轮播图--兼容IE8
//引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- swiper 轮播图，拖动之后继续轮播
在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...
- swiper轮播图（逆向自动切换类似于无限循环）
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
随机推荐
- jenkins自动部署tomcat
关于部署的3种思路: 远程部署(jenkins编译部署到远程服务器): 安装ssh插件 ssh插件配置 添加远程jenkins服务器节点: 本地部署(与jenkins在同一服务器): 关于maven构 ...
- 关于符号Symbol第二篇
来看一下继承自Symbol的具体实现类. 1.TypeSymbol /** A class for type symbols. * Type variables are represented by ...
- sql 时期格式整理
我们经常出于某种目的需要使用各种各样的日期格式,当然我们可以使用字符串操作来构造各种日期格式,但是有现成的函数为什么不用呢? SQL Server中文版的默认的日期字段datetime格式是yyyy- ...
- 数据库--oracle安装配置(本地安装的步骤及各种问题解决方案)
oracle版本:Oracle 11g 本地电脑配置:安装内存8G 64为操作系统win8.1 下载Oracle 11g压缩包: 1 网址http://www.oracle.com/technetwo ...
- C#正则表达式合并连续空格为单个空格
第一种方法: 使用 System.Text.RegularExpressions.Regex.Replace()方法 string result = String.Empty; string str ...
- 【.Net】鼠标点击控制鼠标活动范围 ClipCursor
可以使用API ClipCursor,如果你不嫌麻烦的话. 以下方法: Private Sub Form1_MouseDown(sender As System.Object, e As System ...
- window.history的跳转实质－HTML5 history API 解析
在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...
- 体验 QQ机器人C# SDK 1.X 特性总结
主要特性 依赖注入 框架本身采用 Autofac 作为依赖注入框架.进行插件开发时,必然会使用到该框架.建议开发者阅读官方文档熟悉其用法.https://autofac.readthedocs.io/ ...
- [转]How to nest transactions nicely - "begin transaction" vs "save transaction" and SQL Server
本文转自:http://geekswithblogs.net/bbiales/archive/2012/03/15/how-to-nest-transactions-nicely---quotbegi ...
- 阿里云1核1GIIS都装不上
没有启用虚拟内存启用之后就可以安装了 注意还要把自动更新服务关掉