久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

20
2018/05

Swiper細(xì)節(jié)詳解之分頁器、前進(jìn)后退按鈕

發(fā)布時間:2018-05-20 22:03:28
發(fā)布者:chaobai
瀏覽量:
0

    在我們使用Swiper輪播組件時,再需要考慮到細(xì)節(jié)處理時,比如分頁器、前進(jìn)后退按鈕的顏色是否符合網(wǎng)站整體色調(diào)搭配,我們就需要考慮自定義它們的顏色屬性。在易學(xué)優(yōu)項目中我真正去注意到分頁器及前進(jìn)后退按鈕的自定義顏色樣式。

圖片.png

一、分頁器顏色樣式

    1.樣式type:

    'bullets’  圓點(diǎn)(默認(rèn)) ‘fraction’  分式  ‘progressbar’  進(jìn)度條 ‘custom’ 自定義

    2.顏色自定義

    例如:

   .swiper-pagination-bullet{width:*; height:*; background:#***;}:默認(rèn)時的顏色
   .swiper-pagination-bullet-active{background:#***;}:  active選中狀態(tài)的顏色

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

二、前進(jìn)后退按鈕顏色樣式

    swiper中前進(jìn)后退按鈕是為png圖片,我們可以自定義圖片樣式和顏色屬性。

    1.如若不使用默認(rèn)箭頭樣式,我們可以更換prev、next圖片

  
  

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

    2.若使用默認(rèn)箭頭樣式時,改變顏色可以使用其官方給出的方法

   .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");}
上一篇: 使用插件簡單實現(xiàn)滾動偵測動畫效果
下一篇: animation+wow實現(xiàn)炫酷滾動動畫效果
返回列表
相關(guān)文章
相關(guān)案例
熱門文章
最新文章