咨询电话:
15628812133
20
2018/05

Swiper细节详解之分页器、前进后退按钮

发布时间:2018-05-20 22:03:28
发布者:chaobai
浏览量:
0

    在我们使用Swiper轮播组件时,再需要考虑到细节处理时,比如分页器、前进后退按钮的颜色是否符合网站整体色调搭配,我们就需要考虑自定义它们的颜色属性。在易学优项目中我真正去注意到分页器及前进后退按钮的自定义颜色样式。

图片.png

一、分页器颜色样式

    1.样式type:

    'bullets’  圆点(默认) ‘fraction’  分式  ‘progressbar’  进度条 ‘custom’ 自定义

    2.颜色自定义

    例如:

   .swiper-pagination-bullet{width:*; height:*; background:#***;}:默认时的颜色
   .swiper-pagination-bullet-active{background:#***;}:  active选中状态的颜色

    改变. swiper-button-prev的background-image:url(图片);即可

二、前进后退按钮颜色样式

    swiper中前进后退按钮是为png图片,我们可以自定义图片样式和颜色属性。

    1.如若不使用默认箭头样式,我们可以更换prev、next图片

  
  

    改变. swiper-button-prev的background-image:url(图片);即可

    2.若使用默认箭头样式时,改变颜色可以使用其官方给出的方法

   .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23******'%2F%3E%3C%2Fsvg%3E");}
   .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23******'%2F%3E%3C%2Fsvg%3E");}
上一篇: 使用插件简单实现滚动侦测动画效果
下一篇: animation+wow实现炫酷滚动动画效果
返回列表
相关文章
相关案例
热门文章
最新文章