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

基于swiper的两边叠加轮播图

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

 42623  316  查看评论 (21)
分享到微信朋友圈
X
基于swiper的两边叠加轮播图 ie兼容10
 查看演示  立即下载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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网站宽屏banner幻灯片切换
  幻灯片和轮播图
 31132  381

可嵌入图片全屏滑动

 可嵌入图片视频jQuery全屏滑块
  幻灯片和轮播图
 31687  455

迅雷首页官网多图焦点图特效

 模拟迅雷首页的幻灯片切换效果
  幻灯片和轮播图
 40181  355

淘宝首页图片自动轮循效果

 jQuery淘宝首页图片自动轮循效果
  幻灯片和轮播图
 31846  312

讨论这个项目（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张图片的轮播
        areyouOk评论奖励 1 jQ币
        2019/10/16 16:35:49

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

        1
        2
        3
        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,但点击切换后会停止，修改以下

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        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
        有待优化，你解决的话给我留个言
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复