使用Swiper自定义轮播图

一、背景

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

它的页面效果如下:

二、主要代码

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

使用Swiper自定义轮播图_第1张图片

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

.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初始化代码

 

你可能感兴趣的:(CSS3)