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