vue-awesome-swiper无法更改分页器样式。

Question

无法更改分页器样式，直接类名更改样式无效。

vue-awesome-swiper应该怎样更改分页器样式比如颜色，大小。

Answer 1

真正的答案是启用CSS具名scoped以后，你的swiper分页样式就失效了！因为分页是在mouted里创建的，此时创建的DOM，vue是不会帮你把上面加上scoped自定义属性的！

Answer 2

我感觉是因为, span这个分页器的标签, 是swiper自动创建的, 不是我们在template中的, 所以, 我们的类样式无法生效

// 修改一波

调整分页的样式为自定义, 然后写个paginationCustomRender()函数来返回自己想要的一个标签.具体函数在官方API上面.

      new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: false,
        paginationType: 'custom',
        loop: true, 
        speed: 300,
        autoplay: 4000,
        // 滑动结束后, 继续轮播
        autoplayDisableOnInteraction: true,
        // 自定义分页样式
        paginationCustomRender: function (swiper, current, total) {
          const activeColor = '#168fed'
          const normalColor = '#aeaeae'
          let color = ''
          let paginationStyle = ''
          let html = ''
          for (let i = 1; i <= total; i++) {
            if (i === current) {
              color = activeColor
            } else {
              color = normalColor
            }
            paginationStyle = `background:${color};opacity:1;margin-right:0.875rem;`
            html += `<span class="swiper-pagination-bullet" style=${paginationStyle}></span>`
          }
          return html
        }
      })

Answer 3

你这个可能只是因为css的优先级不够吧。

1. 外层元素加id，以#id .swiper-pagination-bullet去覆盖样式；
2. 在属性里面加!important，强制覆盖，不过并不推荐这样做；

Answer 4

加!important提升优先级就可以了

Answer 5

被采纳的答案已经把为什么不起作用解释的很清楚了，想自定义样式的只能用js，参考下面：

API文档：Swiper4文档 - renderCustom()

文档案例：

var mySwiper = new Swiper('.swiper-container',{
  pagination: {
        el: '.swiper-pagination',
        type: 'custom',
        renderCustom: function (swiper, current, total) {
          return current + ' of ' + total;
        }
  },
})

vue代码示例：

data() {
    return {
        swiperOption: {
            pagination: {
              el: '.swiper-pagination',
              type: 'custom',
              // 自定义分页样式,css样式也写在这里，
              renderCustom: function(swiper, current, total) {
                  return current + ' of ' + total;
              }
            }
         }
    }
}

Answer 6

参考 https://vue-loader.vuejs.org/...