swiper.js响应式触屏滑动图片轮播切换特效【原创

来源:https://www.sucaihuo.com/js/3146.html 2017-10-18 18:41浏览(3316) 收藏

swiper.js响应式触屏滑动图片轮播切换特效,宽屏自适应电脑手机移动端banner图片切换插件,带索引与左右控制按钮,相当完美。
swiper.js响应式触屏滑动图片轮播切换特效
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 30 积分

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>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3146.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2