swipe的基础使用（二十七）

最新推荐文章于 2024-04-28 16:25:33 发布

花开艳丽终消散

最新推荐文章于 2024-04-28 16:25:33 发布

阅读量3.3k

点赞数

分类专栏： swiper介绍文章标签： html5 web前端框架移动 swiper

本文链接：https://blog.csdn.net/never__ends/article/details/52045624

版权

swiper介绍专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本次内容介绍swiper当中的自定义导航。

首先还是新建一个swiper页面。

 <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

然后在编写CSS样式的时候加入pagination的样式，如下。

.swiper-pagination-bullet{
                width:20px;
                height:20px;
                text-align:center;
                line-height:20px;
                font-size:12px;
                color:#000;
                opacity:1;
                background:rgba(0,0,0,0.2);
            }
            .swiper-pagination-bullet-active{
                color:#fff;
                background:#007aff;
            }

然后在js当中进行初始化

var swiper=new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                paginationBulletRender:function(index,className){
                    return '<span class="'+className+'">'+(index+1)+'</span>';
                }
            });

这样就改变了分页导航的原始样式。这个是文档给出的示例，我们也可以将导航修改为其他的样式