PC基于swiper卡片轮播

最新推荐文章于 2024-04-09 19:02:15 发布

qq_43003057

最新推荐文章于 2024-04-09 19:02:15 发布

阅读量941

点赞数 1

分类专栏：轮播卡片 PC 文章标签： javascript html html5 css3 前端

本文链接：https://blog.csdn.net/qq_43003057/article/details/106687137

版权

轮播同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

卡片

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

swiper卡片轮播

在这里插入图片描述

<html lang="zh">
<head>

    <!-- head头 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>卡片轮播</title>
    <link rel="stylesheet" href="package/css/swiper.css" media="all">
<style>

</style>
</head>
<body>
<div id="persons">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class="img-responsive pperson" src="imgs/s1.jpg" alt="" >
            </div>
            <div class="swiper-slide">
                <img class="img-responsive pperson" src="imgs/s2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img class="img-responsive pperson" src="imgs/s3.jpg" alt="">
            </div>
        </div>
    </div>
</div>
<script src="package/js/swiper.js"></script>
<script>
    var personsSwiper = new Swiper('#persons .swiper-container', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 4,
        autoplay: true,
        on: {
            progress: function (progress) {
                for (i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i);
                    var slideProgress = this.slides[i].progress;
                    modify = 1;
                    if (Math.abs(slideProgress) > 1) {
                        modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                    }
                    translate = slideProgress * modify * 260 + 'px';
                    scale = 1 - Math.abs(slideProgress) / 4;
                    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);
                    }
                }
            },
            setTransition: function (transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }

            }
        }
    })
</script>
</body>
</html>

qq_43003057

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
PC基于swiper卡片轮播

swiper卡片轮播 var personsSwiper = new Swiper(’#persons .swiper-container’, {watchSlidesProgress: true,slidesPerView: ‘auto’,centeredSlides: true,loop: true,loopedSlides: 4,autoplay: true,on: {progress: function (progress) {for (i = 0;
复制链接

扫一扫