web前端-快速理解swiper（滑动）

最新推荐文章于 2023-06-30 18:32:28 发布

Yozo椰子

最新推荐文章于 2023-06-30 18:32:28 发布

阅读量615

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/lin875859873/article/details/109533975

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="utf-8">
    <title>swiper</title>
    <link rel="stylesheet" href="./packages/swiper.min.css">
    <style>
        .banner {
            width: 400px;
            height: 200px;
            background-color: chocolate;
            text-align: center;
            line-height: 200px;
        }

        .banner .swiper-slide {
            width: 400px;
        }

        /* 自定义分页器容器 */
        .pagination {
            text-align: center;
            font-size: 0;
            line-height: 0;
            vertical-align: top;
        }

        /* 自定义分页器子元素未选中 */
        .bullet {
            display: inline-block;
            background-color: cyan;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            color: #856a31;
            font-size: 16px;
            line-height: 20px;
            text-align: center;
        }

        /* 自定义分页器子元素已选中 */
        .bullet-active {
            background-color: darkblue;
            color: #fff;
        }

        /* 自定义导航按钮-前 */
        .prevEl {
            background-color: darkred;
            width: 30px;
            height: 30px;
            margin: 0 auto;
        }
        
        /* 自定义导航按钮-后 */
        .nextEl {
            background-color:goldenrod;
            width: 30px;
            height: 30px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- 
        container为显示区域
        一般会加个类名区别，万一一个页面不止这个滑动呢
    -->
    <div class="swiper-container banner">
        <!-- wrapper内容，一般水平扩展会超出视野 -->
        <div class="swiper-wrapper">
            <!-- 具体每个滑块大小 -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
    </div>
    <!-- 自定义分页器和导航按钮,写在container外头 -->
    <!-- 分页器 -->
    <div class="pagination"></div>
    <!-- 导航按钮前 -->
    <div class="prevEl"></div>
    <!-- 导航按钮后 -->
    <div class="nextEl"></div>

    <!-- js部分 -->
    <script src="./packages/swiper.js"></script>
    <script>
        var swiper = new Swiper('.banner', {
            pagination: {
                el: '.pagination',
                clickable: true,
                // 自定义分页器未选中类名
                bulletClass: 'bullet',
                // 自定义分页器选中后类名
                bulletActiveClass: 'bullet-active',
                // 给分页器加数字用
                renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + (index + 1) + '</span>';
                },
            },
            navigation: {
                prevEl: '.prevEl',
                nextEl: '.nextEl',
            },
        });
    </script>
</body>

</html>

在这里插入图片描述

Yozo椰子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端-快速理解swiper（滑动）

自用，对swiper（滑动）的理解<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>swiper</title> <link rel="stylesheet" href="./packages/swiper.min.css"> <style> .banner {
复制链接

扫一扫