Swiper全屏响应式图片滑动切换代码

来源:https://www.sucaihuo.com/js/3839.html 2018-07-30 11:51浏览(2638) 收藏

一款电脑端与手机端都可以用的Swiper全屏响应式图片滑动切换代码,点击左右箭头按钮进行切换,电脑拖动图片也可以切换,手机触屏滑动图片切换。
Swiper全屏响应式图片滑动切换代码
分类:图片代码 > 图片轮播 难易:中级
查看演示 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript">
            window.onload = function() {
                var swiper = new Swiper('.swiper-container',{
                    autoplay: false,
                    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>
评论0
头像

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

1 2