优美的Swiper-Scale轮播效果

最新推荐文章于 2025-04-09 15:00:27 发布

夏尔の

最新推荐文章于 2025-04-09 15:00:27 发布

阅读量4.6k

点赞数 6

分类专栏： JavaScript 文章标签： Swiper轮播 Swiper轮播缩放效果

本文链接：https://blog.youkuaiyun.com/qq_16371909/article/details/80840830

版权

本文介绍了如何使用Swiper实现一个优美的轮播图效果，特别是缩放效果。通过CSS3和Swiper的特定配置项，实现了流畅的轮播体验。提供了完整代码示例，并鼓励读者根据此效果进行个性化改造。同时，作者对读者能耐心阅读表示疑问：是手机游戏不够吸引，还是恋爱让人疲惫?

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2018年06月26日，项目中又遇到一个不常规的轮播图，Swiper一直用的很顺手，于是继续用Swiper。
之前我也记录过一个比较有趣的轮播，传送门。

效果图如下：实际效果相当流畅，图片只能5M，录图效果只能如此，完整DEMO可以在这里下载。
这里写图片描述

实现的原理是合理利用CSS3的transform: scale();，再配合Swiper的配置项centeredSlides和slidesPerView，这两项配置的说明请去Swiper3的配置项手册去找，这里恕我不再搬运人家的文档，毕竟最近小姐姐不理我心情不好。
这里写图片描述

完整代码如下（自己找几张图片换下路径）：
还要引用jquery，swiper.js,swiper.css,不要打开崩了你的心态也跟着崩了，为了让你们舒服的copy，我已经很努力了，结果还要被骂！

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Swiper-Scale效果</title>
        <!--  这里要引用swiper的CSS的 -->
        <link rel="stylesheet" href="../js/swiper-3.4.2.min.css" />
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            a {
                text-decoration: none;
            }

            .ry-content {
                position: relative;
                margin-top: 140px;
            }

            .ry-swiper {
                width: 1194px;
                cursor: pointer;
                padding: 20px 0 60px;
            }

            .ry-pagination {
                margin-top: 20px;
            }

            .ry-swiper .swiper-slide {
                width:

最低0.47元/天解锁文章