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 ...
随机推荐
- Vue的Computed的使用
Vue的Computed的使用 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- linux把程序添加到全局环境变量
比如把, nginx服务放到全局变量 ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/ /usr/local/bin/就是环境变量目录
- 纯C++安卓开发 (ndk)系列之 ---- 常见问题
常见问题1:run as Android Application运行时提示无法识别到模拟器 解决步骤如下: (1)首先查看安卓模拟器是否已经打开 (2)如果安卓模拟器已经打开,则操作步骤为:点击Ecl ...
- ARP地址解析协议原理
概述 网络层以上的协议用IP地址来标识网络接口,但以太数据帧传输时,以物理地址来标识网络接口.因此我们需要进行IP地址与物理地址之间的转化. 对于IPv4来说,我们使用ARP地址解析协议来完成IP地址 ...
- 1000. A-B
1000. A-B -----> http://soj.me/1000 Constraints Time Limit: 1 secs, Memory Limit: 32 MB Descripti ...
- 《小岛经济学--鱼、美元和经济的故事》Digest
作者:彼得.D.希夫(Peter D. Schiff)安德鲁.J.希(Andrew J. Schiff) How an Economy Grows and Why It Crashes 打车到清华,车 ...
- mariadb(mysql)从库relaylog损坏无法同步的处理方法
故障说明 晚上备用服务器自动重启,收到报警,备用服务器上的mariadb从库无法去同步主库.启动mariadb后,报如下错误(重点看红色字体) mariadb_1 | -- :: [Note] Pl ...
- 使用JS导出页面内容到Excel
JS代码 <script> $(function(){ // 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HT ...
- [转]Using Browser Link in Visual Studio 2013
本文转自:https://docs.microsoft.com/en-us/aspnet/visual-studio/overview/2013/using-browser-link Browser ...
- [转]Log4Net日志插件配置详解
log4net是一款优秀的第三方日志框架,可以很容易的加载到开发项目中(引用log4net的dll,再配置些基本参数即可),帮助程序员把日志信息输出到各种不同的目标,常见的有文本.数据库.window ...