基于swiper的两边叠加轮播图

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

 23197  209  查看评论 (19)
分享到微信朋友圈
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轮播图/内容滑块插件Quake Slider

jQuery轮播图插件Quake Slider提供了24种过渡效果。
  幻灯片和轮播图
 27459  326

jQuery制作手机网页图片滚动切换支持拖动功能焦点图特效

jQuery制作手机网页图片滚动切换支持拖动功能焦点图特效
  幻灯片和轮播图
 33934  259

单击图片切换轮播效果

纯CSS样式,单机第一张图片切换下一张,实现图片切换轮播效果.
  幻灯片和轮播图
 20452  224

针对移动设备的手动切换插件

该插件可以将浏览器中的元素集合像卡片一样通过手势切换,在电脑和移动设备上均可使用。
  幻灯片和轮播图
 26114  273

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

    幸福~手掌 0
    2019/12/25 18:59:46
    有谁改了能兼容移动端rem的吗 回复
    幸福~手掌 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
    回复
    祈祷者 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
        有待优化,你解决的话给我留个言
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复