使用Swiper自定义轮播图

一、背景

最近研究了得到页面的轮播图的实现。使用的控件是Swiper，分页器使用的是自定义的样式，导航按钮使用自定义的图标来实现。然后把分页器和导航按钮放在自定义的指定位置。

它的页面效果如下：

二、主要代码

                /*添加自定义的class来自定义样式及位置*/
                

                
                

                    
                    
                
            

导航按钮主要是设置宽高，然后指定背景图片就可以了

.banner-swiper-container .pagination-wrapper .pagination-wrapper-center .page-change-icon .prev-page {
    width: .68rem;
    height: .68rem;
    background: url(https://piccdn.luojilab.com/fe-oss/default/MTU3MzAwOTY1NjEz.png) 0 0/contain;
}

.banner-swiper-container .pagination-wrapper .pagination-wrapper-center .page-change-icon .prev-page:hover {
    cursor: pointer;
    background: url(https://piccdn.luojilab.com/fe-oss/default/MTU3MzAwOTc0Njk5.png) 0 0/contain;
}

.banner-swiper-container .pagination-wrapper .pagination-wrapper-center .page-change-icon .next-page {
    margin-left: .133333rem;
    width: .68rem;
    height: .68rem;
    background: url(https://piccdn.luojilab.com/fe-oss/default/MTU3MzAwOTY2MDQ0.png) 0 0/contain;
}

.banner-swiper-container .pagination-wrapper .pagination-wrapper-center .page-change-icon .next-page:hover {
    cursor: pointer;
    background: url(https://piccdn.luojilab.com/fe-oss/default/MTU3MzAwOTc1MDIz.png) 0 0/contain;
}

 

三、swiper初始化代码