1.基本使用

var OrderMenu = new Swiper('#OrderMenu',{
loop: false, // 是否循环
autoplay: 1000, // 时间
slidesPerView: , // 显示四列
prevButton:'#country_ban_prev', // 前后,切换
nextButton:'#country_ban_next', onClick: function(OrderMenu){ // click事件
alert('你点了Swiper'); } });

2.mySwiper.activeIndex  显示当前索引值

<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.activeIndex);
})
</script>

3.跳转 slideTo

$('#btn').click(function(){
mySwiper.slideTo(, , false);//切换到第一个slide,速度为1秒
})

4.双向控制

<script>
var Swiper1 = new Swiper('#swiper-container1',{
})
var Swiper2 = new Swiper('#swiper-container2',{
})
Swiper1.params.control = Swiper2;//需要在Swiper2初始化后,Swiper1控制Swiper2
Swiper2.params.control = Swiper1;//需要在Swiper1初始化后,Swiper2控制Swiper1
</script>

反向控制

Swiper1.params.control = Swiper2; Swiper1.params.controlInverse=true;

单向控制

Swiper1.params.control = Swiper2;

5增加样式

<script>
var mySwiper = new Swiper('.swiper-container',{
})
mySwiper.container[0].style.opacity=0.5;
//mySwiper.container.css({opacity: 0.1});
</script>

分页器样式  mySwiper.bullets[1].style.border='1px solid #fff';

6.增加Class

<script>
var mySwiper = new Swiper('.swiper-container',{
})
mySwiper.wrapper.addClass('my-class');
//$(mySwiper.wrapper[0]).addClass('my-class');
//mySwiper.slides.eq(0).css({opacity: 0.1});
</script>

7.获取slides长度

<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.slides.length);
mySwiper.slides[].style.opacity=0.5;
//mySwiper.slides.eq(0).css({opacity: 0.1});
})
</script>

8.wrapper  位移,输出:距离左边-800px

<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.translate);
})
</script>

9.提示当前的swiper-slide 位置, 第三个

var OrderMenu = new Swiper('#OrderMenu',{
loop: false,
slidesPerView: ,
onClick: function(OrderMenu){
alert(OrderMenu.clickedIndex);
} });

9.删除某个swiper-slide

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
observer:true,
})
$('#btn1').click(function(){
$(".swiper-wrapper .swiper-slide1").remove();
})
</script>

10.swiper点击或者滑动后,就不再自行滚动

解决办法1:系统自带属性autoplayDisableOnInteraction

var mySwiper = new Swiper('#brand_Ban',{
pagination : '.pagination',
autoplay : ,
loop : true,
paginationClickable : true ,
autoplayDisableOnInteraction : false, // true ,停止; false,滚动 })

解决办法2:jquery

$('.pagination').click(function(){
mySwiper.startAutoplay();
})

swiper笔记的更多相关文章

  1. 前端笔记之移动端&响应式(下)默认样式&事件&惯性抛掷&swiper&loaction对象

    一.移动端默认样式 ·IOS和Android下触摸元素时出现半透明灰色遮罩 a,input,button{ -webkit-tap-highlight-color: transparent; } ·I ...

  2. 小程序笔记三:幻灯片swiper 和图片自定义高度

    滑动组件:scroll-view wxml代码 <view> <scroll-view scroll-x="true" class="tab-h&quo ...

  3. JavaScript笔记杂谈篇(啥都有)

    二维码缩放比例以43PX的倍数缩放最为标准. NuGet相关管理http://www.cnblogs.com/dudu/archive/2011/07/15/nuget.html 学习笔记: http ...

  4. 结合swiper使用图片懒加载

    本人渣渣一枚,技术一般,记录下笔记,大神勿喷,可以留下优化建议,谢谢 最近刚刚做了个展示型的网站,使用swiper搭的框架,因为图片比较多,所 以首次加载稍微有些慢,虽然压缩过了,但是尽可能的优化吧, ...

  5. css动效库animate.css和swiper.js

    animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...

  6. Python全栈之jQuery笔记

    jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...

  7. amazeui学习笔记一(开始使用5)--藏品collections

    amazeui学习笔记一(开始使用5)--藏品collections 一.总结 1.藏品collections:一些 Amaze UI 中没有的功能.amazeui认为好的解决方案.像图表绘制里面的百 ...

  8. 微信小程序练习笔记(更新中。。。)

    微信小程序练习笔记 微信小程序的练习笔记,用来整理思路的,文档持续更新中... 案例一:实现行的删除和增加操作  test.js // 当我们在特定方法中创建对象或者定义变量给与初始值的时候,它是局部 ...

  9. git-简单流程(学习笔记)

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

随机推荐

  1. HSV

    HSV 相比于面向机器的RGB, HSV或HSI更贴近于人对颜色的描述: H: Hue, 颜色本身 S: Saturation, 纯色被白色稀释的程度. V: Value, 或I, Intensity ...

  2. ES6新特性:增加新类型:Symbol

    本文所有Demo的运行环境都为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : ES6新增了一种数据类型:Symbol,Symbol是用来定义对象的唯一属性名的不 ...

  3. spoj687 后缀数组重复次数最多的连续重复子串

    REPEATS - Repeats no tags  A string s is called an (k,l)-repeat if s is obtained by concatenating k& ...

  4. 控件(文本类): TextBox, PasswordBox

    介绍背水一战 Windows 10 之 控件(文本类) TextBox PasswordBox 示例1.TextBox 的示例 1Controls/TextControl/TextBoxDemo1.x ...

  5. Asp.Net Mvc4分页,扩展HtmlHelper类

    1.分页方法   using System.Collections.Generic; using System.Collections.Specialized; using System.Linq; ...

  6. java代码运行linux shell操作

    1.Java调用shell  Java语言以其跨平台性和简易性而著称,在Java里面的lang包里(java.lang.Runtime)提供了一个允许Java程序与该程序所运行的环境交互的接口,这就是 ...

  7. [bzoj1010][HNOI2008]玩具装箱

    Description 有个物品,每个物品长度为,现在要把这个物品划分成若干组,每组中的物品编号是连续的,规定每组的长度,费用为,求最小费用. Input 第一行输入两个整数和,接下来行输入. Out ...

  8. 【BZOJ-1552&3506】robotic sort&排序机械臂 Splay

    1552: [Cerc2007]robotic sort Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 806  Solved: 329[Submit][ ...

  9. Jenkins用HTTP Request Plugin插件进行网站的监控(运维监控)

    使用的插件: [HTTP Request Plugin] 思路: 说明:只能是网站是否正常打开,而不能是这个网站业务是否正常,如果是后者,则需要写特定的接口进行请求处理. 1.通过插件,发送GET请求 ...

  10. Python简介及环境部署

    Python的由来:         Python的创始人:Guido van Rossum Guido 在1989年12月时,寻找一门“课余”编程项目来打发圣诞节前后的时间.Guido决定为当时正构 ...