如何修改Vertical Slick Carousel自定义分页的当前页码颜色？

当然可以实现！咱们只需要把当前滑块序号和总滑块数拆分成两个独立的HTML元素，再通过CSS分别给它们设置不同颜色就搞定了。我帮你调整了代码，直接替换就能生效：

修改后的JavaScript代码 #

var $slider = $("#slider"); 
$slider.on('init', function() { 
  mouseWheel($slider); 
}).slick({ 
  dots: true, 
  centerPadding: '0px', 
  vertical: true, 
  autoplay: true, 
  autoplaySpeed: 2900, 
  slidesToShow: 1, 
  slidesToScroll: 1, 
  arrows: true, 
  verticalSwiping: true, 
  adaptiveHeight: true, 
  infinite: true, 
  prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>', 
  nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>', 
  dotsClass: 'slider-paging-number', 
  customPaging: function(slider, i) { 
    // 用两个span分别包裹当前序号和总数，方便设置不同样式
    return `<span class="current-slide">${slider.currentSlide + 1}</span> / <span class="total-slides">${slider.slideCount}</span>`; 
  } 
}).on('afterChange', function(event, slider, currentSlide) { 
  // 切换滑块后更新分页文本，这里要用html()而不是text()，否则会把标签当成纯文本
  $(this).find('[role="tablist"] li').eq(0).html(
    `<span class="current-slide">${currentSlide + 1}</span> / <span class="total-slides">${slider.slideCount}</span>`
  ); 
}) 

function mouseWheel($slider) { 
  $(window).on('mousewheel', { $slider: $slider }, mouseWheelHandler); 
} 

function mouseWheelHandler(event) { 
  event.preventDefault(); 
  var $slider = event.data.$slider; 
  var delta = event.originalEvent.deltaY; 
  if (delta > 80) { 
    $slider.slick('slickPrev'); 
  } else { 
    $slider.slick('slickNext'); 
  } 
} 

$('.prev').click(function() { 
  $slider.slick('slickPrev'); 
}); 

$('.next').click(function() { 
  $slider.slick('slickNext'); 
});

修改后的CSS代码 #

.slider-paging-number li:nth-child(1n+2) { 
  display: none; 
  cursor: context-menu; 
} 

.slider-paging-number li { 
  list-style: none; 
  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; 
  cursor: context-menu; 
  font-size: 15px; 
  font-weight:800; 
  padding: 16px; 
  background-color: white; 
  position: absolute; 
  right: 50px; 
  bottom:4px; 
  z-index: 99999; 
}

/* 给当前序号设置颜色 */
.slider-paging-number .current-slide {
  color: #e74c3c; /* 红色，你可以换成任意颜色 */
}

/* 给总滑块数设置颜色 */
.slider-paging-number .total-slides {
  color: #95a5a6; /* 灰色，你可以换成任意颜色 */
}

关键说明 #

1. 核心思路是把原来的纯文本拆分到两个<span>标签里，分别赋予不同类名，这样就能通过CSS精准控制各自的颜色
2. 注意在afterChange事件里必须用html()方法，而不是原来的text()，否则会把HTML标签当成纯文本显示
3. 你可以完全根据自己的设计需求，修改.current-slide和.total-slides的颜色值，换成任何你喜欢的配色

内容的提问来源于stack exchange，提问作者Rafael Andrews