Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码
充值

jQuery响应式手机端触屏滑动图片轮播插件

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-12-24
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>