基于swiper的两边叠加轮播图

所属分类:媒体-幻灯片和轮播图

 41437  315  查看评论 (21)
分享到微信朋友圈
X
基于swiper的两边叠加轮播图 ie兼容10
progress: function(progress) {
    for (i = 0; i < this.slides.length; i++) {
        var slide = this.slides.eq(i);
        var slideProgress = this.slides[i].progress;
        if (Math.abs(slideProgress) > 1) {
            var modify = (Math.abs(slideProgress) - 1) * 0.4 + 1;
        }
        translate = slideProgress * modify * 318 + 'px';
        scale = 1 - Math.abs(slideProgress) / 5;
        zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
        slide.transform('translateX(' + translate + ') scale(' + scale + ')');
        slide.css('zIndex', zIndex);
        slide.css('opacity', 1);
        if (Math.abs(slideProgress) > 3) {
            slide.css('opacity', 0);
        }
    }
}

此为设置两边渐小的图片大小的代码

相关插件-幻灯片和轮播图

jQuery手机触屏滑动的响应式图片轮播效果

jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码。
  幻灯片和轮播图
 65022  476

图片切换轮播

无数字图片切换
  幻灯片和轮播图
 40672  356

jQuery 3d轮播插件flipster.js

JQuery+css实现图片轮播效果,支持移动端拖动切换。
  幻灯片和轮播图
 65825  542

jQuery图片轮播插件jquery.tiles.js

jquery.tiles图片切换插件,支持多达12种特效、22个自定义参数;支持随机顺序、循环、正反方向、导航、缩略图;幻灯片播放前、中、后自定义事件等,相信可以满足绝大多数需求。
  幻灯片和轮播图
 30364  372

讨论这个项目(21)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    尤德光 0
    2022/4/11 11:55:06
    看大家的评论有待优化啊 回复
    幸福~手掌 0
    2019/12/25 18:59:46
    有谁改了能兼容移动端rem的吗
        yyzyqcw0
        2022/7/11 18:37:57
        。。
    回复
    幸福~手掌 0
    2019/12/25 0:56:48
    那些数字参数(318, x/5, >3)能详细说说分别代表什么吗 回复
    祈祷者 0
    2019/11/4 16:33:05
    大佬 我现在swiper轮播图一个页面多次使用之后 swiper 第一次轮播会出现秒闪的空白 请问这是什么问题 我在网上也找不到答案 求教
        路尔轩0
        2019/11/11 14:47:30
        我也没有遇到过,方便的话可以到发邮件到1006214269@qq.com一起讨论
    回复
    祈祷者 0
    2019/10/16 15:40:47
    修改多少可以换成三张图片?我项目要求3张图片的轮播
        areyouOk1
        2019/10/16 16:35:49

        第88行,在这里修改Math.abs(slideProgress) > 3改为Math.abs(slideProgress) > 1

        if (Math.abs(slideProgress) > 1) {
           slide.css('opacity', 0);
        }
        祈祷者0
        2019/10/21 10:13:52
        多谢大佬 挺好用的 就是swiper坑有点多
    回复
    waka 0
    2019/8/16 17:16:59
    赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞
        路尔轩0
        2019/8/17 11:47:22
        谢谢你的支持
    回复
    jinsom 0
    2019/7/30 23:04:20
    怎么自动播放
        西瓜0
        2019/7/31 0:57:16

        当前演示就是自动播放的。autoplay: true,但点击切换后会停止,修改以下

        var mySwiper = new Swiper("#banner", {
                    autoplay: {
                        disableOnInteraction: false, //默认true
                        delay: 2000, //默认3000
                    },
                    loopedSlides: 5,
                    slidesPerView: 'auto',
                    loop: true,
                    centeredSlides: true,
                    initialSlide: 2,
                    watchSlidesProgress: true,
                    disableOnInteraction: false,
                    pagination: {
                        el: '.banner_page',
                        clickable: true,
                    },
    回复
    lx 0
    2019/7/3 10:16:37
    案例切换没问题,下载到本地之后切换很不自然。
        lx0
        2019/7/3 12:56:46
        插件的距离单位px和移动端的rem单位换算不一致,会导致偏差,切换的时候出现bug,应该不同的移动端上会出现不同的bug。刚做了一个还反向轮播呢!
        lx0
        2019/7/3 13:02:10
        不能完全适配移动端。
        路尔轩0
        2019/7/4 13:47:22
        你说的不自然是指切换时候左右两边突然变大吗?
        这个写的时候就没有适配移动端,如果需要可以自己修改一下或者我有空时候更新一下
    回复
    ?找-安静 0
    2019/6/22 23:55:23
    切换的时候很不自然,,,
        路尔轩0
        2019/7/4 13:48:54
        你说的不自然是指切换时候突然变大吗?
        waka0
        2019/8/16 17:16:21
        有点
        路尔轩0
        2019/8/17 13:34:26
        有待优化,你解决的话给我留个言
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复