swiper插件的使用
swiper插件简单又好用,推荐给大家,例子:swiper3.0一、形式1html代码:
varswiper=newSwiper('#al-container',{
pagination:'#al-pagination',
nextButton:'#al-button-next',
prevButton:'#al-button-prev',
slidesPerView:1,
paginationClickable:true,
spaceBetween:30,
autoplay:4500,
speed:600,
autoplayDisableOnInteraction:false,
loop:true
})
css样式更改、定制#al-container{width:1063px;height:731px;float:left;margin-left:65px;}
#al-pagination{bottom:62px;}
#al-pagination.swiper-pagination-bullet{background:#fff;opacity:1;}
#al-pagination.swiper-pagination-bullet-active{background:blue;}
#al-button-next{background:url(images/btn_r.png)no-repeat;top:8%;width:36px;height:36px;}
#al-button-prev{background:url(images/btn_l.png)no-repeat;top:8%;width:36px;height:36px;}二、形式2html代码:
选项1
选项2
选项3
varmySwiper2=newSwiper('#swper1-container',{
autoplay:3000,//可选选项,自动滑动
onSlideChangeStart:function(swiper){
varj=mySwiper2.activeIndex;
$('.tabspan').removeClass('active').eq(j).addClass('active');
},
//pagination:'.pagination1',
});
/*列表切换*/
$('.tabspan').bind('click',function(e){
e.preventDefault();
//得到当前索引
vari=$(this).index();
$('.tabspan').removeClass('active').eq(i).addClass('active');
mySwiper2.slideTo(i,1000,false);
});三、形式3
varswiper=newSwiper('#al-container',{
pagination:'#al-pagination',
paginationClickable:true,
direction:'vertical',
//如果需要前进后退按钮
nextButton:'#al-button-next',
keyboardControl:true,
mousewheelControl:true,
direction:'vertical',
mousewheelForceToAxis:true,
autoplay:3000
});
swiper4.0html代码:
1
2
js代码:varswiper=newSwiper('#swiper-container1',{
slidesPerView:4,
spaceBetween:13,
centeredSlides:false,
autoplay:{
delay:2500,
disableOnInteraction:true,
},
loop:true,
loopFillGroupWithBlank:true,
pagination:{
el:'.swiper-pagination',
clickable:true,
},
navigation:{
nextEl:'#swiper-button-next1',
prevEl:'#swiper-button-prev1',
},
});