jQuery响应式手机端触屏滑动图片轮播插件
jQuery响应式手机端触屏滑动图片轮播插件,含多种图片滑动切换效果可选,兼容PC端与手机端。
在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载
js代码
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/hammer.min.js'></script>
<script src='js/slider.js'></script>
<script>
$('#pbSlider0').pbTouchSlider({
slider_Wrap: '#pbSliderWrap0',
slider_Threshold: 10,
slider_Speed:600,
slider_Ease:'ease-out',
slider_Drag : true,
slider_Arrows: {
enabled : true
},
slider_Dots: {
class :'.o-slider-pagination',
enabled : true
},
slider_Breakpoints: {
default: {
height: 500
},
tablet: {
height: 350,
media: 1024
},
smartphone: {
height: 250,
media: 768
}
}
});
$('#pbSlider').pbTouchSlider({
slider_Wrap: '#pbSliderWrap',
slider_Threshold: 50,
slider_Speed:400,
slider_Ease:'linear',
slider_Drag : false,
slider_Arrows: {
enabled : false
},
slider_Breakpoints: {
default: {
height: 300
},
tablet: {
height: 250,
media: 1024
},
smartphone: {
height: 200,
media: 768
}
}
});
$('#pbSlider2').pbTouchSlider({
slider_Wrap: '#pbSliderWrap2',
slider_Threshold: 25,
slider_Speed:1000 ,
slider_Ease:'cubic-bezier(.16,.92,0,.8)',
slider_Dots: {
class:'.slider-pagination',
enabled : false
},
slider_Breakpoints: {
default: {
height: 300
},
tablet: {
height: 250,
media: 1024
},
smartphone: {
height: 200,
media: 768
}
}
});
$('#pbSlider3').pbTouchSlider({
slider_Wrap: '#pbSliderWrap3',
slider_Threshold: 50 ,
slider_Speed:400 ,
slider_Ease:'linear',
slider_Breakpoints: {
default: {
height: 400
},
tablet: {
height: 300,
media: 1024
},
smartphone: {
height: 200,
media: 768
}
}
});
</script>
在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:737597453@qq.com


