swiper笔记

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();
})