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();
})
上一篇:[SQL]不知道1


下一篇:linux命令:cat