懒人之家--可能是JS网页特效代码收集最全的懒站!

swiper手机焦点图幻灯片切换特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-11-11
swiper手机焦点图幻灯片切换特效是一款基于swiper.js的手机移动端图片滑动切换代码,宽屏响应式自适应浏览器宽度。


js代码

<script src="js/swiper.min.js"></script>
<script>
window.onload = function() {
var swiper = new Swiper('.swiper-container',{
	autoplay:3000,
	speed:1000,
	autoplayDisableOnInteraction : false,
	loop:true,
	centeredSlides : true,
	slidesPerView:2,
	pagination : '.swiper-pagination',
	paginationClickable:true,
	prevButton:'.swiper-button-prev',
	nextButton:'.swiper-button-next',
	onInit:function(swiper){
		swiper.slides[2].className="swiper-slide swiper-slide-active";//第一次打开不要动画
		},
	breakpoints: { 
			668: {
				slidesPerView: 1,
			 }
		}
	});
	}
</script>