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
}
})
Swiper4重写分页器样式
猜你喜欢
转载自blog.csdn.net/Tongzhiyong233/article/details/80952871
今日推荐
周排行