使用swiper5进行3d轮播图，轮播切换.

chen_sir_sh

已于 2022-11-29 14:53:41 修改

阅读量2.6k

点赞数 1

分类专栏：工作分享文章标签： css3 js html

于 2020-09-15 22:18:43 首次发布

本文链接：https://blog.csdn.net/m54584mnkj/article/details/108611176

版权

工作分享专栏收录该内容

67 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper的3D切换</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/certify.css">
    <script src="js/swiper.min.js"></script>

</head>

<body>
    <div id="certify">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/certify01.png" />
                    <p>非常难得又值钱的认证证书</p>
                </div>
                <div class="swiper-slide"><img src="images/certify02.png" />
                    <p>深圳市优秀互联网企业认定证书</p>
                </div>
                <div class="swiper-slide"><img src="images/certify03.png" />
                    <p>质量管理体系认证荣誉证书</p>
                </div>
                <div class="swiper-slide"><img src="images/certify04.png" />
                    <p>计算机软件著作权登记证书</p>
                </div>
                <div class="swiper-slide"><img src="images/certify05.png" />
                    <p>增值电信业务经营许可证</p>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script>
        certifySwiper = new Swiper('#certify .swiper-container', {
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            loopedSlides: 5,
            autoplay: false,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                //clickable :true,
            },
            on: {
                progress: function(progress) {

                    //通过循环给每个元素添加相对应的style样式。
                    //slide 当前slide 
                    //slideProgress:图片所对应的索引
                    //modify: 起始值
                    //translate  轮播图平移的水平距离
                    //scale  两边图片缩放的比例
                    //zIndex 两边图片的层级关系
                    for (i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i);
                        var slideProgress = this.slides[i].progress;
                        console.log(slideProgress)
                        var modify = 1;
                        //这里的260指的是两个元素之间平移的距离
                        var translate = slideProgress * modify * 260 + 'px';
                        var scale = 1 - Math.abs(slideProgress) / 5;
                        var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                        //设置轮播图单图的样式
                        slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                        slide.css('zIndex', zIndex);
                        slide.css('opacity', 1);
                        //隐藏多余的轮播图.  1就是两边只剩一个，加上中间一个，就是三个。
                        //                  2就是两边只剩两个，加上中间一个，就是五个。
                        if (Math.abs(slideProgress) > 3) {
                            slide.css('opacity', 0);
                        }
                    }
                },
                //轮播图滚动的动画效果
                setTransition: function(transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }

                }
            }

        })
    </script>
</body>

</html>

chen_sir_sh

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用swiper5进行3d轮播图，轮播切换.

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper的3D切换</title> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/certify.css">
复制链接

扫一扫