UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

基于swiper的两边叠加轮播图

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

 40261  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);
        }
    }
}

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

相关插件-幻灯片和轮播图
查看更多

基于swiper带视差切换效果的轮播图

 双层轮播图，里面的轮播图是一倍速轮播，外面的轮播图是双倍苏轮播，意想不到的美感
  幻灯片和轮播图
 35899  343

jq全兼容自适应宽度图片轮播（新手适用）

 简单的jq逻辑，方便引用，易看懂，兼容性好
  幻灯片和轮播图
 23028  212

根据浏览器宽度大小自动调整图片的jquery相册代码

 根据浏览器宽度大小自动调整图片的jquery相册代码
  幻灯片和轮播图
 25791  319

jQuery手机响应式设计焦点图

 jQuery手机响应式设计焦点图
  幻灯片和轮播图
 41243  405

讨论这个项目（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
        有待优化，你解决的话给我留个言
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复