1.基本使用
var OrderMenu = new Swiper(‘#OrderMenu‘,{ loop: false, // 是否循环 autoplay: 1000, // 时间 slidesPerView: 4, // 显示四列 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(0, 1000, 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‘); </script>
7.获取slides长度
<script> var mySwiper = new Swiper(‘.swiper-container‘,{ }) $(‘#btn1‘).click(function(){ alert(mySwiper.slides.length); mySwiper.slides[0].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: 4, onClick: function(OrderMenu){ alert(OrderMenu.clickedIndex); } });
原文：http://www.cnblogs.com/wesky/p/4993872.html