如何在React Slick Slider的nextSlide与prevSlide上添加类名

首先需要注意Slick内置钩子的参数顺序，你现有代码里beforeChange的参数定义有误，完整可用的实现如下：

完整代码 #

// 通用方法：清空所有幻灯片的自定义类，避免类名残留
const clearSlickCustomClasses = (slickInstance) => {
  slickInstance.$slider.find('.slick-slide').removeClass('slick-prev-slide slick-next-slide slick-active-slide slick-sliding-in slick-sliding-out')
}

const settings = {
  dots: true,
  dotsClass: "slick-dots slick-thumb",
  centerMode: true,
  slidesToShow: 3,
  swipe: true,
  swipeToSlide: true,
  arrows: false,
  infinite: false,
  speed: 300,
  mobileFirst: true,
  // 初始化完成钩子
  onInit: function(event, slick) {
    clearSlickCustomClasses(slick)
    const currentIndex = slick.currentSlide
    // 给当前激活、上一张、下一张幻灯片加对应类
    slick.$slides.eq(currentIndex).addClass('slick-active-slide')
    currentIndex > 0 && slick.$slides.eq(currentIndex - 1).addClass('slick-prev-slide')
    currentIndex < slick.slideCount - 1 && slick.$slides.eq(currentIndex + 1).addClass('slick-next-slide')
  },
  // 切换开始前钩子
  beforeChange: function(event, slick, currentSlide, nextSlide) {
    console.log("before change", currentSlide, nextSlide);
    clearSlickCustomClasses(slick)
    // 按切换前的状态加类
    slick.$slides.eq(currentSlide).addClass('slick-active-slide')
    currentSlide > 0 && slick.$slides.eq(currentSlide - 1).addClass('slick-prev-slide')
    currentSlide < slick.slideCount - 1 && slick.$slides.eq(currentSlide + 1).addClass('slick-next-slide')
  },
  // 切换进行中钩子
  change: function(event, slick, currentSlide, nextSlide) {
    // 可按需添加切换过程中的过渡类
    slick.$slides.eq(nextSlide).addClass('slick-sliding-in')
    slick.$slides.eq(currentSlide).addClass('slick-sliding-out')
  },
  // 切换完成后钩子
  afterChange: function(event, slick, currentSlide) {
    console.log("after change", currentSlide);
    clearSlickCustomClasses(slick)
    // 按切换完成后的新状态加类
    slick.$slides.eq(currentSlide).addClass('slick-active-slide')
    currentSlide > 0 && slick.$slides.eq(currentSlide - 1).addClass('slick-prev-slide')
    currentSlide < slick.slideCount - 1 && slick.$slides.eq(currentSlide + 1).addClass('slick-next-slide')
  }
};

说明 #

• 代码里的类名slick-prev-slide、slick-next-slide等可以根据你的实际需求替换成自定义类名
• 已经做了边界判断，适配你配置的infinite: false场景，不会给不存在的首尾幻灯片外的元素加类

内容的提问来源于stack exchange，提问作者Salman Aziz