swiper插件做3D轮播

最新推荐文章于 2024-03-07 09:54:48 发布

管理界的扫地僧

最新推荐文章于 2024-03-07 09:54:48 发布

阅读量552

点赞数

分类专栏：日常总结文章标签： css js

本文链接：https://blog.csdn.net/weixin_48181168/article/details/117448422

版权

日常总结专栏收录该内容

20 篇文章 3 订阅

订阅专栏

<link rel="stylesheet" href="../js/swiper.css">
    <style>
        .swiper-container,
        .swiper-wrapper,
        img{
            width: 320px;
            height: 200px;
        }

    </style>
</head>
<body>
    <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../img/1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../img/2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../img/3.jpg" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>

</div>

    <script src="../js/swiper.min.js"></script>
    <script>
        // 参数一  swiper 容器  选择器
        new Swiper(".swiper-container",{
            // 是否开启循环模式
            loop:true, 
            // 切换特效
            effect:"cube",
            // 分页器  就是轮播图下面的那个点
            // 上面轮播模板分页   写的是什么，复制过来
            pagination:".swiper-pagination",
            // 滚动条
            scrollbars:".swiper-scrollbar"
        })
    </script>
</body>

需要官网下载swiper.css和swiper.min.js插件，进行引用。

管理界的扫地僧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
swiper插件做3D轮播

<link rel="stylesheet" href="../js/swiper.css"> <style> .swiper-container, .swiper-wrapper, img{ width: 320px; height: 200px; } </style></head><body> <.
复制链接

扫一扫