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 ...
随机推荐
- 第6章—渲染web视图—SpringMVC+Thymeleaf 处理表单提交
SpringMVC+Thymeleaf 处理表单提交 thymleaf处理表单提交的方式和jsp有些类似,也有点不同之处,这里操作一个小Demo,并说明: 1.demo的结构图如下所示: pom.xm ...
- 解析ASP.NET Mvc开发之查询数据实例 分类： ASP.NET 2014-01-02 01:27 5788人阅读 评论(3) 收藏
目录: 1)从明源动力到创新工场这一路走来 2)解析ASP.NET WebForm和Mvc开发的区别 ----------------------------------------------- ...
- php 比较2字符串相似度 百分比
$n1 = similar_text($str1, $str1); $n2 = similar_text($str2, $str2); $nn = similar_text($str1, $str2) ...
- IDEA里运行程序时出现Error：scalac：error while loading JUnit4 , Scala signature JUnit4 has wrong version错误的解决办法（图文详解）
不多说,直接上干货! 问题详情 当我们在运行程序时,出现Error:scalac:error while loading JUnit4 , Scala signature JUnit4 has wro ...
- 《Mysql技术内幕，Innodb存储引擎》——Innodb体系结构
Innodb体系结构 Innodb存储引擎主要包括内存池以及后台线程. 内存池:多个内存块组成一个内存池,主要维护进程/线程的内部数据.缓存磁盘数据,修改文件前先修改内存.redo log 后台线程: ...
- Eth 部署智能合约
首先要开发以太坊的智能合约,需要EVM(以太坊虚拟机),也就是需要运行的环境,我们可以通过 geth 来设置开发环境: geth --datadir testNet --dev console 2&g ...
- 使用DataTrigger来代替Triggerr
普通的Trigger监听鼠标移入的代码如下: <Trigger Property="IsMouseOver" Value="true"> & ...
- struct in_addr 结构体
struct in_addr 结构体: struct in_addr { in_addr_t s_addr; }; 表示一个32位的IPv4地址. in_addr_t一般为32位的unsigned i ...
- rake aborted! You have already activated rake 10.1.0, but your Gemfile requires rake 10.0.3. Using bundle exec may solve this.
问题: wyy@wyy:~/moumentei-master$ rake db:createrake aborted!You have already activated rake 10.1.0, b ...
- MJRefresh源码框架分析
MJRefresh是一款非常优秀的刷新控件.代码简洁,优雅.今天有时间对源代码阅读了一下.对MJRefresh的宏观设计非常赞叹.所谓大道至简就是这样吧. MJRefresh所采用的主要设计模式非 ...