分享好友 教程首页 教程搜索 频道列表

swiper点击切换,拖动切换后继续自动轮播

2020-07-20 08:345300
+关注28
核心提示:用代码测试


    HTML结构

Slide 1Slide 2Slide 3Slide 4


    Swiper.js设置

var banner = new Swiper('.swiper-banner', {
        //分页,多个分页可以使用不同的class名
        pagination: '.swiper-pagination-banner',
        //点击切换
        paginationClickable: true,
        //自动播放时间
        autoplay:5000,
        //切换速度,即slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间。
        speed:2000,
        //复制slide,看起来是循环的
        loop:true,
        //用户操作swiper之后,是否禁止autoplay.默认为true:停止。
        autoplayDisableOnInteraction:false,
        //拖动释放时不会输出信息,阻止click冒泡。拖动Swiper时阻止click事件。
        preventlinksPropagation:true
    });

     

4.0以上  Swiper.js设置

            var swiper = new Swiper('.swiper-container1', {
                // slidesPerView: 3,
                // slidesPerColumn: 2,
                spaceBetween: 10,
                loop: true,
                autoplay: true,
                autoplayDisableOnInteraction: false,//这个加了没啥用
                on: {
                    slideChangeTransitionEnd: function() {
                        this.autoplay.start();//就加这个玩意儿
                    },
                }
            });


本文标签: #幻灯 #轮播 #切换 #swiper #自动
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

hammer.js的常规使用

    hammer.js是一个开源的库,他可以的实现在移端开发的大多数事件,如:点击、滑动、拖动、多点触控等事件。hammer.js不需要依赖任何其他的js框架,并且整个框架非常小Pan:拖动事件1、Pan:拖动事件!DOCTYPEhtmlhtmlh

网络转载 JavaScript教程2023-03-31

图片Slider 带左右按钮

    直接上整体

网络转载 HTML相关 12021-12-23

原生js实现移动端+pc端 轮播插件

    slide.js原生js写的轮播兼容 pc+移动端 插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航

网络转载 HTML相关2021-12-23

jQuery网站导航加轮播图

小黑 导航2020-07-12

下一篇
我来说两句
抢沙发