如何在React Slick轮播组件中为前后相邻div添加className

直接参考如下完整实现代码即可：

const BeerSlider = () => {
  // 封装公共的前后项类名更新方法，初始化和切换时都可以复用
  const setAdjacentClass = (slick) => {
    // 先清空所有轮播项的自定义类，避免切换后类名残留
    slick.$slides.removeClass('prev-slide next-slide')
    const currentIdx = slick.currentSlide
    const total = slick.slideCount
    // 兼容infinite模式的边界索引计算
    const prevIdx = currentIdx === 0 ? total - 1 : currentIdx - 1
    const nextIdx = currentIdx === total - 1 ? 0 : currentIdx + 1
    // 给前后项加自定义类
    slick.$slides.eq(prevIdx).addClass('prev-slide')
    slick.$slides.eq(nextIdx).addClass('next-slide')
  }

  const settings = {
    className: 'center',
    dots: true,
    infinite: true,
    speed: 500,
    focusOnSelect: true,
    slidesToShow: 3,
    centerMode: true,
    slidesToScroll: 1,
    centerPadding: '230px',
    // onInit钩子默认会接收slick实例作为入参
    onInit: (slick) => {
      setAdjacentClass(slick)
    },
    // 轮播切换后同步更新类名，避免错位
    afterChange: (_, slick) => {
      setAdjacentClass(slick)
    }
  }

  // 原有轮播渲染逻辑不变
  return <Slider {...settings}>
    {/* 轮播项内容 */}
  </Slider>
}

注意事项 #

• 代码里的prev-slide、next-slide是示例类名，你可以替换为自己需要的自定义类名
• 如果你没开启infinite无限滚动模式，可以删掉边界索引判断，直接取currentIdx - 1和currentIdx + 1即可
• 必须加afterChange钩子的同步逻辑，否则轮播滑动后前后项的类名不会自动更新，会一直停留在初始化状态

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