swiper笔记

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');
//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[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);      
    }

  });

 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 : 3000, 
    loop : true,  
    paginationClickable : true ,
    autoplayDisableOnInteraction : false,   // true ,停止； false，滚动

})

 

解决办法2：jquery

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